Things You'll Need:
- Adobe Dreamweaver CS4 software
-
Step 1
Select the textCreate the text in Dreamweaver where you want to add the tooltip. In this example I highlighted the acronym STEM.
-
Step 2
The tooltip iconIn 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.
-
Step 3
Type the tooltip textThe 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.
-
Step 4
Save the dependent filesSave 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.
-
Step 5
PropertiesYou 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.
-
Step 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.











Comments
Veesites said
on 4/2/2009 Zahzel, I've been using Dreamweaver since the first version came out in the 1990s. I've written about it for a long time, in books and on my own blog as well as here. Let me know what you want to know and I'll write a how to for you.
zahzel said
on 4/1/2009 I have a site and used Dreamweaver and have tried for hours and days to put pics on it and to no avail. I will try your tips.TY!
zahzel said
on 4/1/2009 How did you learn so much?'How long have you been using Dreamweaver?Did you take a class or watch the videos they supply?Really appreciate your sharing and knowledge5Stars!