JQuery_ Novice to Ninja - Earle Castledine [72]
Advanced Tooltips
It’s good to know how to build a simple tooltip, but we also know that we can do better. For more sophisticated tooltips, which can include other markup (such as images or links) inside the content, we’ll need to move them from the title attribute into our actual markup. We’ll hide them with CSS, then reveal and position them using jQuery as required. The final effect is illustrated in Figure 5.11.
Figure 5.11. Our advanced tooltip
Our tooltip markup will consist of two nested span elements, which will sit inside the element we want to use to trigger the tooltip. This may occasionally require some creativity with your markup, but helps us to position the tooltip, as we can give it an absolute position offset from the parent element. It also helps us handle triggering events, since, if the user moves the mouse over the tooltip, it will still be over the triggering element, so no additional hover event handling is required.
Here’s an example of the tooltip markup:
chapter_05/18_advanced_tooltips/index.html (excerpt)
Welcome to
StarTrackr! the planet's premier celebrity tracking …
When we’re done, the tooltip will look great and will contain a link to the disclaimer page. But let’s not hang around; we’ve considered a few tooltip methods, so let’s drive straight in.
As we’ll see when we start writing the code, our tooltip will be quite clever, positioning itself on whichever side of the target element that has enough room for it to be displayed. In order to make a cool text-bubble graphic work in this context, we’ll need four different bubbles: above-left, above-right, below-left, and below-right. We’ll be using a single sprite for each of the tooltip’s four possible states, as illustrated in Figure 5.12.
Figure 5.12. Our tooltip sprite
These tooltips require some fairly complex jQuery code. We’ll go over it bit by bit, but don’t worry if you have trouble understanding all of it right now. There’s a bit of a leap from writing quick two- or three-line scripts which replace and highlight content on the page to writing a more complex UI widget. At the beginning of the next chapter, we’ll have a look at some of the ways we can try to minimize complexity and keep our code readable, even as it becomes longer and more involved.
For the moment, try to focus on seeing the bits of jQuery you already know employed in a larger context; this should give you an idea of how you can go about combining small pieces of logic into a larger picture that performs really impressively.
Our first task is to create a TT object that will contain all our code. We set a delay variable at the top of the object (this will make it easier to modify the configuration of the widget without hunting through the code to find where this variable was set):
chapter_05/18_advanced_tooltips/script.js (excerpt)
var TT = {
delay: 600,
Then we add a function called setTips, which we’ll run when the page loads or is resized. This function will find all the tooltips on the page and determine their position by looking at their parent elements. It will also set up a hover event on each of them so that they’re displayed on mouseover. Here’s the hover event:
chapter_05/18_advanced_tooltips/script.js (excerpt)
setTips: function() {
$('.tooltip').parent().hover(function() {(1)
// store the tooltip being hovered
TT.current = $(this);(2)
TT.timer = setTimeout(function() {(3)
// find the tooltip,
TT.current.find(".tooltip").fadeIn('fast');
}, TT.delay);
}, function() {
// on mouseout, clear timer and hide tooltip
clearTimeout(TT.timer);(4)
$(this).find(".tooltip").fadeOut('fast');
}).attr("title", ""); // clear the title to stop browser tooltips
That’s a fairly dense block of code, so let’s see if we can make some sense of what’s happening:
(1)
We’ve attached the hover event to the parent of the tooltip span. If you look