This is a Tooltip Script that uses easyTooltip plug-in.
By default this plugin will read the title attribute of the element and convert it into fade-in tooltip that you can style any way you want. Important note, it doesn’t have to be an anchor tag. You can apply this script to any element(s) you want.
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include easyTooltip.js script and jQuery framework:
The <head> section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:
By default a tooltip is added to links (<a> tags) with .tooltips class that are placed to an element (<ul> tag) with .work-list class. Here you can add the script attributes to define the following values:
• xOffset – offset to the left from the cursor (in pixels). Default setting is 10;
• yOffset – offset to the top from the cursor (in pixels). Default setting is 25;
• tooltipId – use this if you want to assign custom id to your tooltip. Also, if you have multiple tooltips on one page and you want to style them differently, use ID’s to assing different css definitions. Default setting is easyTooltip;
• clickRemove – by default tooltip disapears once you rool out of the element. Using this options you can remove tooltip by clicking on the element. Default setting for this option is false;
• content – by default Easy Tooltip displays title attribute of an element. Use this option to send a custom content to the tooltip. Default setting for this option is “” (empty);
• useElement – if you’d like to display more complex HTML in your tooltip and yet you hate writing it inside a content option, you can use a certain element’s inner HTML.
Below you can see the HTML script representation:
The HTML part is represented by a bulleted list. The script will get title attribute content and create a tooltip from it.
You can find script related stylesheet in the main style.css file. You will need to modify the following styles:
Here #easyTooltip styles define the tooltip appearance.“easyTooltip” Tooltip,