How to Create a Tooltip With CSS & jQuery

by Jim Campbell
The src attribute of any img tag in your HTML can be changed using JavaScript.


Comstock/Comstock/Getty Images

Tooltips are small hints that pop up when the user hovers over an icon. You can achieve this convenient effect with HTML div containers that use jQuery. The CSS designs the layout for the tooltip, and jQuery performs all of the functions to pop up and display the tooltip for your readers. To get started with tooltips, you create a simple tooltip container and jQuery code for any HTML element on your Web page.

1. Right-click the HTML file you want to use to create the tooltip. Click "Open With" and select your preferred editor.

2. Set up the tooltip CSS code. The following CSS code is an example of a simple tooltip layout for a popup, but you can use your own colors, width and font settings: .tooltip{ position:absolute; z-index:999; left:-9999px; background-color:#dedede; padding:5px; border:1px solid #fff; width:250px; }

3. Create the tooltip div container. The div element contains the text you want to show to the user. The following code displays "Hello, World" in the tooltip: <div class="tooltip"> <p>Hello World</p> </div>

4. Create the jQuery function that performs the popup activity for the tooltip. The following code adds the popup functionality: $(document).ready(function(){ $(this).removeAttr("title").mouseover(function(){ my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400); }).mouseout(function(){ my_tooltip.fadeOut(400); }); The function above displays the tooltip when the user hovers over an HTML element, and it hides the tooltip when the user's mouse moves away from the element.

5. Add the HTML element you want to use to display the tooltip. This can be a link, button or an image icon. The following code uses a link for the tooltip: <a href="#" title="This is the tooltip element'">Tooltip</a>

About the Author


Photo Credits

  • Comstock/Comstock/Getty Images
Suggest an Article Correction