Picking up where we left off last time, I'm going to create the tooltip div, declare a couple variables, and then bind "mouseover," "mousemove," and "mouseout" all at once. In addition to
tipTitle, I'm declaring
showTip (and leaving it undefined for the moment) and
showTip variable will be used as a reference for the
setTimeout function, and
delay will be used to set the time after which the function within
setTimeout's argument will execute (in this case, 300ms).
Of course, you don't have to use a variable for the delay, but I like to have that sort of setting up top where I can find it easily. Also, if I ever decide to convert this script into a plugin, having the delay stored in a variable will make it simpler to convert it to an option.
Setting the Timeout
.bind(), and after the business of determining whether the event is being triggered by a link or one of its descendants, the
setTimeout is called on line 12:
setTimeout is actually a method of the
window object; as such, the
this keyword inside its function argument will refer to
window. It's not of much concern here because, with event delegation, we're relying on
event.target rather than
this, but I thought it might be worth mentioning anyway.
Note that within the
setTimeout function, I'm storing a little data (line 13) for the link to indicate that the tooltip is active on it. This
tipActive information then determines what to do on mouseout.
Clearing the Timeout
On mouseout, if the link has the
tipActive data, that data is removed (line 29, below), the tooltip is hidden (line 30), and the link's original title attribute value is restored if tipTitle has a value (line 31). If that
tipActive data is not associated with the link, then the timeout that was set on mouseover is reset with
clearTimeout (line 33).
The mousemove part hasn't changed from what it was in the previous post, except that it first checks if the "tipActive" data is assigned to the link. I figured that setting the
left properties of the tooltip is probably more work than doing a little check on the link's data, so why bother setting them if I don't have to?
So, that's it. Just add a simple
setTimeout delay and conditionally clear it. If you want to set a delay on mouseout, you can do that the same way.
Flipping the Tip
Next time, I'll show how to flip the tooltip from the right side of the cursor to the left if it would otherwise get cut off by the edge of the browser window.