• Choose a category
• All
• Classic-Fiction

By Root 1064 0

control is positioned absolutely, which will allow us to move it around as required. Next, we’ll set up some stubs for our code to sit in, which lets you see the general structure: a simple hover function, followed by a chained mousemove function. We want the tooltip to turn on and off with the hover event, and update its position whenever the mouse is moved:

chapter_05/17_simple_tooltips/script.js (excerpt)

$('.location').hover(function(e) {

// Hover over code

}, function() {

// Hover out code

}).mousemove(function(e) {

// Mouse move code

});

Starting with the overall structure and then filling in the details is a great way to plan out your code, ensuring you know what’s going on before diving in. It helps when writing code to always have a contextual understanding of where that piece sits in the larger picture.

Let’s start filling in those stubs. The hover over code is the most interesting, so we’ll start with that. Notice that we’re passing the optional parameter e into the hover code. This is important, as we’ll need to access the X and Y coordinates of the event in order to position the tooltip:

chapter_05/17_simple_tooltips/script.js (excerpt)

// Hover over code

var titleText = $(this).attr('title');

$(this)

.data('tipText', titleText)

.removeAttr('title');

$('

')

.text(titleText)

.appendTo('body')

.css('top', (e.pageY - 10) + 'px')

.css('left', (e.pageX + 20) + 'px')

.fadeIn('slow');

First we need to grab the title from the link, which will be the text we want our tooltip to display.

The next part of the code is a touch peculiar: it saves the tooltip text using the data method that we saw in the section called “Smarter Scrolling with the data Action” in Chapter 4. We need to do this because we’ll be removing the title from the link, in order to prevent the browser from displaying its default tooltip that will conflict with our custom one. By storing the text using the data command, we can recover and replace the link title later.

We now have everything we need to create our tooltip control. We’ll create a new paragraph element with a class of tooltip, in order to hook into the styles we created earlier. Then we use the text method to set the tooltip’s contents. We could use html instead of text here, but according to W3C standards, the title attribute should not contain HTML. The advanced tooltip we’ll be looking at shortly will allow us to include HTML, but for the moment we’ll stick with plain text.

Note: A Question of Style

We could’ve specified the paragraph’s id with jQuery like this: $('

').attr('id', 'tooltip'). Likewise, we could’ve used JavaScript string concatenation to populate the element’s content: $('

' + titleText + '

'). Both methods result in the same DOM objects, and they’re both fairly clear and readable, so it’s up to your personal coding style whether you prefer doing more with jQuery chaining or with plain JavaScript.

After we add our new node to the page (using appendTo) we set a few inline styles, using the event object (e) to obtain the position where we need to place the tooltip. pageX and pageY are properties of the event object that allow you to find out where the event took place on the page. This can be tremendously useful in a lot of different situations; you’ll often find yourself needing to position an element on the screen based on an event which just fired:

chapter_05/17_simple_tooltips/script.js (excerpt)

// Hover out code

$(this).attr('title', $(this).data('tipText'));

$('.tooltip').remove();

The hover out code couldn’t be simpler: we just reverse what we did in the hover over code, restoring the title attribute and removing the tooltip:

chapter_05/17_simple_tooltips/script.js (excerpt)

// Mouse move code

$('.tooltip')

.css('top', (e.pageY - 10) + 'px')

.css('left', (e.pageX + 20) + 'px');

Finally, we need to respond to mouse movement by updating the tooltip’s location. This way the tooltip will follow the mouse around, just like the browser’s built-in tooltips do. And presto! We’ve replaced the