Arguably the second most important UI widget, the tooltip serves a similar purpose to the overlay, in that it can be used to highlight important pieces of information which relates to an element on screen, such as hints on how to fill in a form, a quicklink prompt to purchasing something, or highlighting information about a concept being discussed on site (in a similar fashion to having footnotes in a book). jQuery Tools' Tooltip is no different in operation to others, but its design makes it very powerful and flexible. Let's have a look at it in a little more detail.
Tooltips are very easy to set up, the basic version uses the folowing structure:
<!-- 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>
The trick to note with tooltips is that you can generate them in one of two ways, by using the title attribute or by including the tooltip block directly after the tooltip trigger.
Tip
Tooltips that just need to display normal text are best achieved by using the [title] attribute. If you need to display more, or include HTML formatting, then use the manual method, with an individual CSS style class or ID selector.
Calling a tooltip can be as easy as simply using the selector element, which is normally the [title] attribute, which contains the text displayed as the tooltip:
$("[title]").tooltip();
If you need to display HTML elements, then you can use the manual format, which can contain any amount of HTML, but will use the element immediately after the trigger instead:
$(".trigger").tooltip();
We can take this even further by adding in some additional options—the slide and dynamic plugins.
The standard Tools' tooltips will serve a purpose, but have at least one inherent limitation—what happens if the browser window is resized? The tooltip doesn't allow for this by default, unless you add in the "dynamic" plugin; the dynamic plugin takes into account where the edges of the viewport are, and "dynamically" positions the tooltip accordingly. For extra functionality, you can also get the tooltip to slide in from the top, left, right, or bottom, rather than just appear in the same direction (from bottom to top). There are more details on the site on how to set up this additional feature.
In the meantime, let's have a look at a project that wouldn't be out of place on a website belonging to a bookshop or publisher, where you can use a "quicklink" to get more information and prices on a book, as well as buy a copy.
You know the drill, you surf to a website where you see a book you want. You don't want to drill down lots of pages, just to buy it, right? I thought so—enter the Tooltip "quicklink". We're going to build in a little tooltip that pops up when you hover over a book, so that you can hit the Buy button directly.
Tip
All of the images are available as part of the code download that accompanies the book, or can be obtained directly from the jQuery Tools website.
Go grab a copy of the HTML template we set up at the beginning of this chapter, so that we can then copy in the basic trigger and tooltip HTML required to make this work:
<!-- trigger element. a regular workable link --> <a id="download_now"><img src="book.jpg"></a> <!-- tooltip element --> <div class="tooltip"> <img src="book.jpg" /> <p class="bookavail">Book and eBook available now</p> <dl> <dt class="label">Book only price:</dt> <dt class="price">£25.19 save 10%</dt> <dt class="label">eBook only price:</dt> <dt class="price">£16.14 save 15%</dt> <dt class="buynow"><a href="http:///store/purchase?id=12345"> <img src="buy_button.png"></a> </dt> </dl> </div>
It's worth noting that, although the code isn't connected to an e-commerce system, you can easily adapt it:
<tr> <td></td> <td><a href="http:///store/purchase?id=12345"> <img src="buy_button.png" /></a></td> </tr>
Now, here comes the crucial part—the styling. jQuery Tools follow the principle of minimal JavaScript coding, preferring to let most of the work be done by CSS. The Tooltip feature is no different, so let's add it to the code below the<head> section, to see the tooltip work:
<style>
.tooltip { display: none; background: url(black_big.png);
height: 145px; padding: 35px 30px 10px 30px;
width: 310px; font-size: 11px; color: #fff; }
.tooltip img { float: left; margin: 0 5px 10px 0; }
.bookavail { margin-top: -5px; color: #f00; font-weight: bold;
font-size: 14px; }
dt.label { float: left; font-weight: bold; width: 100px; }
dt.price { margin-left: 210px; }
dt.buynow a img { margin-top: 10px; margin-left: 110px; }
</style>
Note
It is important to note that the .tooltip class provides the base CSS required for any Tooltip to work; the rest of the CSS is specific to this demonstration.
Whilst the styles above will produce a workable demo, the presentation will not be perfect; we need to add additional styles to tweak the positioning of some of the elements, and fine tune the overall view. Add the following to your earlier stylesheet:
body { margin-top: 100px; margin-left: 200px; }
#booktip img { padding: 10px; opacity: 0.8;
filter: alpha(opacity=80); -moz-opacity: 0.8; }
.bookavail { margin-top: -5px; color: #f00; font-weight: bold;
font-size: 14px; }
Last but by no means least, here's the JavaScript code required for the Tooltip to work. This is split into three parts:
- The first part configures the tooltip appearance on screen
- The second controls the fade in and out of the tooltip
- The final part adjusts the position of the tooltip on screen, to allow for the current browser window dimensions (that is, if it has been resized or is being displayed in full)
<script> $(document).ready(function() { $("#booktip").tooltip({ effect: 'slide', position: 'top right', relative: true, // change trigger opacity slowly to 1.0 onShow: function() { this.getTrigger().fadeTo("slow", 1.0); }, // change trigger opacity slowly to 0.8 onHide: function() { this.getTrigger().fadeTo("slow", 0.8); } }).dynamic({ bottom: { direction: 'down', bounce: true }}); }); </script>
For a simple project, the effect can be very striking—here's how it should look:
You can really go to town on the effects when using Tooltip—one such effect I have seen in use is that of a div that slides out, when hovering over an image; it may seem a little strange, but if you think about it, it is the same effect as used here. It still uses the Tooltip functionality from the Tools library, the only difference (which highlights the true power of jQuery Tools), is the CSS styling used!