How to Build a jQuery Tooltip Plugin

A jQuery tooltip plug-in displays a small window above an element on your Web page, so you can deliver quick tips to the user when they hover over an important part of your page. The jQuery activates when the user hovers over the element, and your code shows the div container with the text you want to display. Tooltips are beneficial for forms where you must help users fill out the text boxes.

Instructions

1. Right-click on the HTML page you want to edit and add the tooltip. Click "Open With" and select your preferred HTML editor.

2. Add the jQuery library files to the top of your page in the "head" section. Copy and paste the following links to your pages:

   <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
   <script type="text/javascript" src="jquery.betterTooltip.js"></script>

3. Create the tooltip link you want to use for the user. The following code creates a link to prompt the user to click for the tooltip:

   <a href="http://site.com/tooltip.php" title="My tooltip text">Click here for help</a>

4. Set up the tooltip code in the "script" section of your page. The following code creates a tooltip when the user clicks the link:

   $.fn.betterTooltip = function(options){
   getTip = function() {
   var tTip =
   "<div class='tip'>" +
   "</div>";
   return tTip;
   $this.click(function() {
   tipInner.html("This is the tooltip");
   setTip(tTop, tLeft);
   setTimer();
   },
   })

5. Save the changes and open the file in your browser to test the code for your users.

References

• Tuts Plus: Build a Better Tooltip with jQuery Awesomeness