Request a meeting room reservation at Northside Learning Center
Webbie Support
Popup Explanations: Tooltips and Other Fun

Presented on 26 January 2006

This lesson is based on the "Cool DHTML Tooltip," from dynamicdrive.com. A tooltip is a text box that appears when a person mouses over an image, link, or other HTML element. Unlike the "Alt" attribute of images, this DHTML tooltip stays visible as long as the mouse is over the designated area.

There are three steps:

  1. Insert the style sheet into the <head> of the HTML document.


  2. Insert the second block of code into the <body> of the document, outside any other tags. It's a good idea to place it immediately after the <body> tag, just to be safe.


  3. Add the following code inside the tag for a link or any other page element (such as images):

    onMouseover="ddrivetip('text text text text text text text text','yellow', 300)"; onMouseout="hideddrivetip()"

    In the code above, ddrivetip controls the appearance of the tooltip.

    • The text in red should be replaced with the text that you want to appear in the tooltip.
    • The two attributes following the text (in green) are optional, and control the color background color and width of that individual tooltip.
    • If the attributes in green are not set, the tooltip will default to the color and width set in the <head> of the document.

      For example, if you wanted to add a tooltip to a link back to the Northside homepage, with an off-white (ivory) background and a tooltip width of 250 pixels, the tag might look like this:

      <a href="http://www.nisd.net" onMouseover="ddrivetip('This link will return you to the Northside homepage, at www.nisd.net ','ivory', 250)"; onMouseout="hideddrivetip()">Back to Northside</a>

  4. If you want to change the font, size or color of the text in the tooltips, that needs to be done in the style sheet that you inserted into the <head> of the document. For example:

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;

Note: If your tooltip text contains an apostrophe ('), a backslash is needed before each apostrophe, like in the example below:

    Teacher\'s Resource Page

Alternatives to Tooltips

  • Use the alt attribute of images to "caption" graphics and photos.

  • Use hotspots and alt attributes to identify people, objects, buildings, etc. within an image.

  • Use Dreamweaver's Behaviors to create pop-up windows. Decide which one of the following conditions you want to activate the pop-up:
    • When a visitor mouses over a link
    • When a visitor clicks a link