New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr7+

Sticky Tooltip script

Author: Dynamic Drive

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):

     

Directions: Developer's View

Step 1: Insert the following code into the <head> section of your page:

Select All

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:

Select All

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:

<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1">
Sticky Tooptip 1 content here...
</div>

<div id="sticky2">
Sticky Tooptip 2 content here...
</div>

<div id="sticky3">
Sticky Tooptip 3 content here...
</div>

</div>

<div class="stickystatus"></div>
</div>

In this case I've defined 3 tooltips. Notice how all 3 are contained inside the DIV with CSS class "stickytooltip", which you should retain (the CSS class that is). Each individual tooltip DIV plus the outermost container should carry a unique but arbitrary ID attribute.

With your tooltip defined, you associate a particular tooltip with an element on the page by inserting the attribute "data-tooltip=tooltipid" into the element, for example:

<a href="http://www.dynamicdrive.com" data-tooltip="sticky1">Dynamic Drive</a>

You set data-tooltip to the ID of the tooltip you want this element to show, in this case, sticky1. You can insert this attribute not just inside links, but any element on the page you wish a tooltip to appear when the mouse rolls over it.

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
fadeinspeed: 200, //duration of fade effect in milliseconds
rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
stickynotice1: ["Press \"s\"", "or right click", "to sticky this box"], //customize tooltip status message
stickynotice2: "Click outside this box to hide it", //customize tooltip status message

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:

infotooltip.init("*[data-tooltip]", "mystickytooltip")

The 2nd parameter should be set to the ID of the DIV holding all your tooltips, which by default is "mystickytooltip". The 1st parameter is reserved for advanced users only, and accepts a jQuery selector limiting the elements the page that are parsed for potentially carrying a tooltip.

Thailand boasts some of the most popular and luxurious resorts in Asia.

Japan is a Asian country off the coast of China.

BC is the westernmost of Canada's provinces and is famed for its natural beauty.Vancouver is BC's largest city.