- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
“easyTooltip” Tooltip
November 15, 2010
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.
The one big thing that makes this different from my first version is that you are now allowed to put custom content, any html content you want – images, long paragraphs, link lists… anything. If you hate writing HTML code inside a JavaScript variable, this plugin allows you to use inner HTML from any element on the page. It means that you can write HTML directly on the page, as you normally do, hide that element with CSS and have it appear as a tooltip on mouse over. Take a look at the demos for more info.
JavaScript
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.
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.
CSS
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.
