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 tooltip text #1"/> <img src="image2.jpg" title="The tooltip text #2"/> <img src="image3.jpg" title="The tooltip text #3"/> <img src="image4.jpg" title="The tooltip text #4"/> </div> 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.