Think Solution Business, Mind and Healty

After test in Drupal

output

Script sample

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="stickytooltip.js">

</script>

<link rel="stylesheet" type="text/css" href="stickytooltip.css" />

<p>Some page contents here...</p>

<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
<p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
<p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" /></p>

<p>Some page contents here...</p>

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>

<div id="sticky2" class="atip" style="width:262px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>

<div id="sticky3" class="atip">
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" />
</div>

</div>

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

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://easy-step-webdesign-solution.blogspot.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.

Thank's toyou