Tracking Mouse Movements with the jQuery Tooltip Plug-in
In this second installment of a seven-part series focused on the jQuery Tooltip plug-in, I demonstrate how to customize its behavior and appearance. First I discuss the use of the “track” parameter, which makes tooltips follow mouse movements, and then I show how to work with the “showURL” argument to prevent “href” attributes from being displayed within the tooltip.
Tracking Mouse Movements with the jQuery Tooltip Plug-in - Hiding URL values from display with the showURL input argument (Page 4 of 4 )
In all the examples developed so far, the default behavior of tooltips is to display the text included in particular links, along with the value assigned to its "href" attribute. Naturally, there may be cases where this result isn't the one desired. Fortunately, the Tooltip plug-in allows you to modify this default behavior by invoking its "tooltip()" method with another handy parameter called "showURL." By assigning a FALSE value to it, then the link's URL will be hidden from display. Want to see how this function works? Pay close attention to the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// assign tooltip to links after web page has been loaded
// delay tooltip display 400 ms, track mouse position and hide URL
$(document).ready(function(){
$("a").tooltip({
delay: 400,
track: true,
showURL: false
});
});
</script>
</head>
<body>
<ul>
<li><a href="http://jquery.com" title="Sample Link 1">Sample Link 1</a></li>
<li><a href="http://jquery.com" title="Sample Link 2">Sample Link 2</a></li>
<li><a href="http://jquery.com" title="Sample Link 3">Sample Link 3</a></li>
<li><a href="http://jquery.com" title="Sample Link 4">Sample Link 4</a></li>
<li><a href="http://jquery.com" title="Sample Link 5">Sample Link 5</a></li>
<li><a href="http://jquery.com" title="Sample Link 6">Sample Link 6</a></li>
</ul>
</body>
</html>
Since "showURL" has been specified to be FALSE, each tooltip associated with the web page links won't display its respective "href" attributes. If you still have some doubts as to how this argument works, the following image should help to dissipate them:
Do you realize how simple it is to customize the behavior and look of tooltips? I'm sure you do. However, I strongly encourage you to develop your own examples and assign different values to the "delay," "track" and "showURL" arguments, so you can grasp more quickly how to modify the default tooltips. No matter what you do with these parameters, one thing is for sure: the experience will be educational and fun.
Final thoughts
In this second installment of the series, I demonstrated how to customize the behavior and appearance of the jQuery Tooltip plug-in. First I discussed the usage of the "track" parameter, which came in handy for making tooltips follow mouse movements, and finally I showed how to work with the "showURL" argument to prevent "href" attributes from being displayed within the tooltip.
In the next episode, things will get even more interesting. I'm going to explain how to apply a fade out effect to the tooltips by means of another useful incoming argument of the "tooltip()" method.
Now that you know what to expect from the forthcoming part of this series, you don't have any excuses to miss it!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
JavaScript 
Applying a Fade Out Effect with the jQuery Tooltip Plug-in
