Dreamweaver CS6: The Missing Manual

Spry Tooltips

Pop-up tooltips are a great way to give visitors supplementary information without visually overloading your web page. A tooltip waits in hiding until a visitor mouses over a word, sentence, or image, and then…bam! The tooltip appears. You can use tooltips to define web page features, display pictures and text, or even point to a web page with additional information. Netflix, for example, uses a simple presentation for the DVDs they rent—the listing includes just pictures, ratings, and a way to quickly add the DVD to your “To rent” list. However, when you mouse over a DVD in the main catalog, a tooltip appears, featuring a detailed summary of the movie. Dreamweaver includes a Spry tool for creating these kinds of useful pop-up boxes.

Adding a Spry Tooltip

A Spry Tooltip widget consists of a trigger—text or an image that your visitor mouses over—and the tooltip itself—the pop-up box. To add a tooltip:

1. Select a word, sentence, image, or block-level element.

   You can turn any block-level element into a trigger: a word, sentence, or paragraph; a headline; an image; or an entire <div> tag. Which way you go depends on the tooltip’s purpose. For example, if you want to define important words in a document, select a single word to trigger the tooltip.

2. Choose Insert→Spry→Spry Tooltip or, on the Insert panel, click the Spry Tooltip icon.

   When you insert a tooltip, Dreamweaver first adds an ID to the trigger—if you select an entire paragraph as a trigger, for example, Dreamweaver adds ...