How to Use the Spry Tooltip Widget in Dreamweaver CS4

One of the new Spry tools in Adobe Dreamweaver CS4 is the tooltip widget. The Adobe Spry framework uses a combination of CSS and JavaScript to enhance web page features. The tooltip widget is similar to what happens when you use a title attribute in a tag, except this Spry tooltip has a style sheet and a JavaScript file attached to it that you can customize. Here is how to work with it.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• Adobe Dreamweaver CS4 software

1. Select the text

   Create the text in Dreamweaver where you want to add the tooltip. In this example I highlighted the acronym STEM.

2. The tooltip icon

   In the Spry category of the Insert bar, select the Spry Tooltip icon. In the classic workspace layout of the Insert bar it's the last Spry icon on the right.

3. Type the tooltip text

   The term gets wrapped in a span tag in the code that will trigger the tooltip. A div containing the tooltip contents (hidden by the CSS until needed) is also added to the page. In Design view you see a blue box with the Spry Tooltip label where you type the content that you want to appear in the tooltip. Note that the box for the tooltip contents would normally appear at the very bottom of the page, which you might have to scroll to find. It's near the example sentence here because that's the entire content of the example page.

4. Save the dependent files

   Save the page. Dreamweaver will notify you that there are two dependent files needed. Click OK and the files will be added to a folder called SpryAssets at the site root level. Remember to upload this folder to the server.

5. Properties

   You can set some properties for the tooltip using the Properties. Click on the blue tooltip label to see the tooltip Property inspector. For example, you can set horizontal offset and mouse behavior in the Properties.

6. You'll see a new CSS file in your CSS panel called SpryTooltip.css. Use this stylesheet to set colors and background color and other properties related to the appearance of the tooltip.

Tips & Warnings

• If you look at Code view, you'll see a JavaScript operator that Dreamweaver inserts at the end of the page. This is in addition to the JavaScript file that is saved to the SpryAssets folder.