Dreamweaver CS5: The Missing Manual

Spry Tooltips

Pop-up tooltips are a great way to provide supplementary information without visually overloading a web page (see Figure 13-10.) A tooltip waits in hiding, until a visitor mouses over a word, sentence, or image, then…bam!…the tooltip appears. You can use a tooltip to define a web page feature, to display pictures and text, or even to point to a web link containing extra information. Netflix.com, for example, provides simple listings of the DVDs they rent—just pictures, ratings, and a way to quickly add the DVD to a “to rent” list. However, when you mouse over the DVD listing, a tooltip appears featuring a detailed summary of the DVD. 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 one:

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

   You can turn any block-level element into a trigger, such as a paragraph, a headline, or an entire <div> tag; or you can turn a single word, sentence, or image into a trigger. 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 (Figure 13-2).

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