Displaying tooltips for an Image Map

This lesson will show you how to display a tooltip when hovering over an image map hotspot.

Insert the image

Right-click our image (below) and save it as lakes03.jpg to your Dreamweaver site folder.

Create a new page in Dreamweaver and insert the lakes03.jpg image inside the page. When Dreamweaver prompts you to insert Alt text, select "Empty".

Draw the Hotsposts

Select the image and click the Rectangle Hotspot Tool on your property inspector.

Now draw a hotspot around the top and left-most question mark.

When you finish the hotspot, Dreamweaver will remind you to describe the map in the "alt" field on the Properties inspector.

Click OK to dismiss the alert and enter Lake Superior in the alt field.

Draw the remaining hotspots

Now draw hotspots around the remaining question marks and enter the name of the Great Lake each represents in the alt field.

Tip: Mouse over the map on this page to identify the lakes

Define your Tooltip

Now that you've drawn your hotspots and entered alt text for each, you're ready to define a tooltip. Open the Tooltip Magic Advanced UI:

For Trigger Element, select the default Tag Name and set the tag to AREA.

For Content Source, select the default Attribute of Trigger and set the attribute to alt.

Set Tooltip Box Width to 180

Set Position to 2-Above Center

Enable (Check) Show Callout Arrow

Set Style Theme to 07 - Style Seven

Click OK

Preview your page and enjoy the tooltips!

Edit the Tooltip CSS

The last task is to center the text inside your tooltips and make the font a bit larger. In your p7TTM07.css file, locate the ".p7TTM07 .p7TTMcnt" rule. Set text-align to center, and increase the font-size from 13px to 15px.

You can make these changes in Dreamweaver's CSS editor, CSS Panel, or directly in the CSS file. Once done, your rule should look like this:

.p7TTM07 .p7TTMcnt {
position: relative;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
margin: 0px 20px;
background-image: url(img/p7TTM07-content.png);
text-align: center;
}

That's it!