Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Sticky Tooltip script
Description: This script adds a rich HTML tooltip to elements that's revealed when the mouse rolls over them, in which the tooltip follows the cursor around as it moves about within the element. The tooltip can be "stickied", or kept visible on the screen by right clicking on pressing "s" should the user wish to interact with some content within the tooltip, such as click a link inside it. The contents for each tooltip are simply defined as regular HTML on the page, making them very easy to define and customize. Throw in a subtle fade in effect, and you've got yourself a tooltip that can do more than just show extra information, but serve it as well!
Demos (move your mouse over, right click/ press "s" to sticky tooltip):
Step 1: Insert the following code into the <head> section of your page:
The above code references two external files which you should download below (right click, and select "Save As"):
Step 2: Insert the below sample tooltip markup code into the <body> section of your page:
Defining your tooltips
All tooltips on the page should be defined inside a single DIV, with each DIV itself wrapped around a DIV with a unique ID attribute. The basic structure is:
In this case I've defined 3 tooltips. Notice how all 3 are contained inside
the DIV with CSS class "
With your tooltip defined, you associate a particular tooltip with an element
on the page by inserting the attribute "
<a href="http://www.dynamicdrive.com" data-tooltip="sticky1">Dynamic Drive</a>
Modifying global settings
There are also some variables inside stickytooltip.js that affect your sticky tooltips in general that you may want to customize. Firstly, near the top of the file:
tooltipoffsets: [20, -30], //additional x and y offset
from mouse cursor for tooltips
These variables control things such as the offset of the tooltips from the mouse cursor, and whether each tooltip should be "stickied" when the right mouse button is clicked over the anchor element etc. More importantly, however, is the last line inside stickytooltip.js:
The 2nd parameter should be set to the ID of the DIV holding all your
tooltips, which by default is "