1.

Basics of using the tooltip

HTML coding

You need two things: the elements that show the tooltips when the cursor is placed on top of them, these elements are called triggers. You also need one or more tooltip elements. In this setup we have a single tooltip element that works for all of the triggers:
<!-- elements with tooltips --> <div id="demo"> <img src="image1.jpg" title="The <img src="image2.jpg" title="The <img src="image3.jpg" title="The <img src="image4.jpg" title="The </div>

tooltip tooltip tooltip tooltip

text text text text

#1"/> #2"/> #3"/> #4"/>

JavaScript coding

Tooltip activation starts by selecting the trigger elements with jQuery. Here we select all img tags that have a title attribute and are nested inside an element with id demo. We supply one argument for the tooltip initialization call which is a jQuery selector to the tooltip element.
$("#demo img[title]").tooltip();

The default behaviour is that the tooltip is positioned on the top/center of the trigger and it slides upwards. Of course, the positioning and the sliding effect can be altered in the configuration as will be seen in the upcoming demos. Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that in the User's Manua

2.Using any HTML inside the tooltip

Tooltip content can be any HTML, not just plain text. Move your mouse over the Download button and you'll see a tooltip that contains an image, table and a link element. You can also see the slide effect in action.

You have enough time to move your cursor away from the trigger element and place it on top of the link that is contained inside the tooltip. You can also customize this delay from the tooltip configuration. Note that if the trigger has a title attribute then the manual tooltip won't be displayed because the title attribute overrides the manual tooltip.

HTML code

We have two things: a trigger element - which is the download button and the tooltip. By default, this tool assumes that the tooltip is placed right after the trigger element. As you can see we have a regular DIV element working as the tooltip container and it can contain anything as opposed to the simple title attribute in the previous demo.
<!-- trigger element. a regular workable link --> <a id="download_now">Download now</a> <!-- tooltip element --> <div class="tooltip"> <img src="http://static.flowplayer.org/img/title/eye.png" alt="Flying screens" style="float:left;margin:0 15px 20px 0" /> <table style="margin:0"> <tr> <td class="label">File</td> <td>flowplayer-3.2.7.zip</td> </tr> <tr> <td class="label">Date</td> <td>2011-03-03</td> </tr> <tr> <td class="label">Size</td> <td>112 kB</td> </tr> <tr> <td class="label">OS</td> <td>all</td> </tr> </table> <a href="/3.2/">What's new in 3.2</a> </div>

CSS coding

The tooltip is styled with these settings. In this example we are using a black-arrowed background image. The important thing to notice here is that you have all the power of CSS when "skinning" the tooltip. You can change the background settings, colors, borders and fonts, etc.
/* trigger button */ #download_now { background:transparent url(/img/home/download.png) no-repeat scroll 0 0; display:block; height:44px;

margin-bottom:30px; overflow:hidden; text-indent:-999em; width:159px; cursor:pointer; } /* mouseover state */ #download_now:hover { background-position:0 -44px ; } /* clicked state */ #download_now:focus { background-position:0 -88px; } /* tooltip styling */ .tooltip { display:none; background:url(http://static.flowplayer.org/tools/img/tooltip/black_ar row_big.png); height:163px; padding:40px 30px 10px 30px; width:310px; font-size:11px; color:#fff; } /* a .label element inside tooltip */ .tooltip .label { color:yellow; width:35px; } .tooltip a { color:#ad4; font-size:11px; font-weight:bold; }

JavaScript code

We select the trigger element with the #download_now selector. If we had chosen to use a class name instead of an ID, we could select multiple triggers from the page and all of them would use the element that is positioned after the trigger as the tooltip.
$("#download_now").tooltip({ effect: 'slide'});

Note: the slide effect is not included in the standard jQuery Tools distribution. You must download a custom combination that includes this effect.

3.Imitating browsers default tooltip

The first two images show the browser's default tooltip and the last two show the jQuery Tools tooltip. We are trying to mimic the standard browser behaviour. So what is the point of all this? First of all we have a similar syntax for enabling both of the tooltips. Browsers without JavaScript enabled will always see the default tooltip. Secondly, the browser's tooltip is not always the best one. Here are the main benefits of the jQuery Tools tooltip which cannot be achieved with the browser's default tooltip:

Appearance and dimensions can be tweaked. The tooltip can contain any HTML element. You have full control over the positioning. You can move the cursor on top of the tooltip so you can use links or forms inside of them. You can control the delay in showing or hiding the tooltip before and after your mouse moves over the trigger element. You can change the show/hide effect. Everything is scriptable and you can even make your own tooltip plugins.

HTML/CSS coding

Our HTML structure is identical to the basic setup. Here we have a single tooltip element and this is how it has been styled:
.tooltip { display:none; background-color:#ffa; border:1px solid #cc9; padding:3px; font-size:13px; -moz-box-shadow: 2px 2px 11px #666; -webkit-box-shadow: 2px 2px 11px #666; }

Note: we are using a drop shadow for the latest browsers, i.e. the latest versions of Firefox, Safari, Konqueror and Chrome JavaScript coding

A single JavaScript call initializes the tooltip. The configuration options are commented:
$("img[title]:gt(1)").tooltip({ // use div.tooltip as our tooltip tip: '.tooltip',

// use the fade effect instead of the default effect: 'fade', // make fadeOutSpeed similar to the browser's default fadeOutSpeed: 100, // the time before the tooltip is shown predelay: 400, // tweak the position position: "bottom right", offset: [-50, -80] });

Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that in the User's Manual.

4.Using tooltips in form fields

Here you can see a tooltip when you put your focus on any of the following form fields. You can move between fields with your keyboard (using the TAB key) or with your mouse.
HTML coding

Here is our HTML structure. Each tooltip is specified in the title attribute of each form element:
<form id="myform" action="#"> <h3>Registration Form</h3> <div id="inputs"> <!-- username --> <label for="username">Username</label> <input id="username" title="Must be at least 8 characters."/><br /> <!-- password --> <label for="password">Password</label> <input id="password" type="password" title="Try to make it hard to guess." /><br /> <!-- email --> <label for="email">Email</label> <input id="email" title="We won't send you any marketing material." /><br /> <!-- message --> <label for="body">Message</label> <textarea id="body" title="What's on your mind?"></textarea><br />

<!-- message --> <label for="where">Select one</label> <select id="where" title="Select one of these options"> <option>-- first option --</option> <option>-- second option --</option> <option>-- third option --</option> </select> <br /> </div> <!-- email --> <label> I accept the terms and conditions <input type="checkbox" id="check" title="Required to proceed" /> </label> <p> <button type="button" title="This button won't do anything">Proceed</button> </p> </form>

This form has minimal CSS styling and you can see it by looking at the standalone page's source code.
CSS coding

Here is our tooltip "skin". Everything is pure CSS without any images or background images:
/* simple css-based tooltip */ .tooltip { background-color:#000; border:1px solid #fff; padding:10px 15px; width:200px; display:none; color:#fff; text-align:left; font-size:12px; /* outline radius for mozilla/firefox only */ -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; }

JavaScript coding

All tooltips are enabled with the following configuration. If you want to customize the events when the tooltip is shown, then you should read about event management from the tooltip documentation.
// select all desired input fields and attach tooltips to them $("#myform :input").tooltip({ // place tooltip on the right edge position: "center right", // a little tweaking of the position offset: [-2, 10], // use the built-in fadeIn/fadeOut effect effect: "fade", // custom opacity setting opacity: 0.7 });

5.Using tooltips in tables or lists

Here is a table with multiple rows. Move your mouse over the delete icons on the right hand side of the table and you'll see an example of the same tooltip for multiple triggers.
HTML coding

We have only one tooltip element and multiple triggers. Each row has a delete.png image which is configured to work as a trigger for our tooltip element. Note that we don't have any title attribute on the triggers so we can use the same content inside the tooltip for every trigger.
<!-- same tooltip for each entry --> <div id="tooltip" class="tooltip"> Remove this row. </div> <table> <tr> <th scope="row" abbr="Model" class="spec">1956 Melbourne</th> <td>Leonid Spirin (URS)</td> <td>Antanas Mikenas (URS)</td> <td>Bruno Junk (URS)</td> <td><img src="table/delete.png" /></td> </tr> <!-- other rows -->

</table>

JavaScript code

Each tooltip is configured with this one JavaScript snippet. We have specified a tip configuration option that will select the tooltip element that is being used by all of the triggers.
// setup tooltip for a single DIV element $("#mytable img").tooltip({ // each trashcan image works as a trigger tip: '#tooltip', // custom positioning position: 'center right', // move tooltip a little bit to the right offset: [0, 15], // there is no delay when the mouse is moved away from the trigger delay: 0 });

Removing a table row

For the curious, we also have a demonstration of how to remove a table row neatly with jQuery. You can also see a sample of the tooltip API call which will close the tooltip when the row is removed:
$("#mytable img").click(function() { // get handle to the current image (trashcan) var img = $(this); // gradually hide the parent row img.parents("tr").fadeOut(function() tooltip API img.data("tooltip").hide(); }); }); {

// after the row is deleted, hide our tooltip using the

6.Custom tooltip effect

Here you can see a customized "bouncy" tooltip effect. We set up things similarly as in the basic setup, but we have modified the sliding effect with our own:
HTML coding

A simple setup with the tooltip element and the triggers:

<!-<img <img <img <img tooltip triggers src="image1.jpg" src="image2.jpg" src="image3.jpg" src="image4.jpg" --> title="The title="The title="The title="The tooltip tooltip tooltip tooltip text text text text #1"/> #2"/> #3"/> #4"/>

Creating the effect

We start by adding a new animation algorithm for jQuery called "bouncy". This is possible by extending the jQuery.easing object. I grabbed this easing function from the jQuery Easing Plugin's source code. There are quite a lot of different easing algorithms that you can try. Custom tooltip effects are done with the $.tools.tooltip.addEffect method. The first argument is the effect name, the second argument is the function that defines how the tooltip is shown and the third argument defines how the tooltip closes. Inside the functions the this variable is a reference to the tooltip API.
// create custom animation algorithm for jQuery called "bouncy" $.easing.bouncy = function (x, t, b, c, d) { var s = 1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; } // create custom tooltip effect for jQuery Tooltip $.tools.tooltip.addEffect("bouncy", // opening animation function(done) { this.getTip().animate({top: '+=15'}, 500, 'bouncy', done).show(); }, // closing animation function(done) { this.getTip().animate({top: '-=15'}, 500, 'bouncy', function() { $(this).hide(); done.call(); }); } );

Note: you can get access to the configuration option with the this.getConf() method, and you can use this object to supply custom configuration options as well. JavaScript coding

Here is the tooltip configuration. We supply our newly created tooltip effect with the effect configuration variable.
$("#demo img[title]").tooltip({effect: 'bouncy'});

7.Dynamic positioning of the tooltip

Below you can see triggers whose tooltip is centered on the top edge of the trigger. Click here to scroll a little lower and see how the tooltips behave now. We are using dynamic plugin which repositions our tooltips so that it is always visible on the viewport. If there is no room on the top edge then the tooltip is shown on the bottom edge. The same happens on every edge of the tooltip: top, bottom, left and right. When there is no room then the opposite edge is used. Note that this demo is only for vertical repositioning. It is possible to change the style, effect and other configuration variables whenever the dynamic repositioning occurs. You can see that in the above example the "slide" effect goes downwards when it is displayed from the bottom edge and we are using a different background image where the arrow points upwards. We are using the offset option to position the tooltip a little higher by default. When using the dynamic effect this value is inverted. Higher means lower and further right means further left. The dynamic plugin can be used together with any effect. The above configuration uses the custom slide effect.
HTML coding

A minimal setup with the tooltip element and the triggers:

<!-- tooltip triggers --> <div id="dyna"> <img src="image1.jpg" <img src="image2.jpg" <img src="image3.jpg" <img src="image4.jpg" </div>

title="The title="The title="The title="The

tooltip tooltip tooltip tooltip

text text text text

#1"/> #2"/> #3"/> #4"/>

CSS coding

When tooltip is repositioned it is assigned new CSS class names. By default we are using "top", "bottom", "left" and "right" to identify which edge is the newly positioned edge. These names can be changed from the plugin's configuration. Here are our settings for the repositioned bottom edge.
/* override the arrow image of the tooltip */ .tooltip.bottom { background:url(/tools/img/tooltip/black_arrow_bottom.png); padding-top:40px; height:55px; } .tooltip.bottom { background:url(/tools/img/tooltip/black_arrow_bottom.png); }

JavaScript coding

After initializing the tooltip we will chain our dynamic() plugin. We have used the bottom parameter to alter the tooltip configuration for the bottom edge. Every configuration option can be used to alter the tooltip's behaviour.
// initialize tooltip $("#dyna img[title]").tooltip({ // tweak the position offset: [10, 2], // use the "slide" effect effect: 'slide' // add dynamic plugin with optional configuration for bottom edge }).dynamic({ bottom: { direction: 'down', bounce: true } });

Note: the dynamic plugin and the slide effect are not included in the standard jQuery Tools distribution. You must download a custom combination to include those effects.