Creating with the new CS4 Spry Tooltip

A new addition in Dreamweaver CS4 is the Spry Tooltip which adds a tooltip to a specific trigger, ie text or image. Place the cursor in the desired position and head to Insert>Spry>Spry Tooltip. This will add all the necessary code directly into the page, press F12 to preview the default tooltip in the preferred web browser.
The code is split into two elements, the trigger and the tooltip content. By default, the trigger contains text, but images are just as acceptable. To change the trigger from text to image simply delete the text between <span id=”sprytrigger1”> and </span> and insert an image (Insert>Image).
The tooltip content is sat inside a tag named .tooltipContent. By default, the class only contains the background colour. To modify the tooltip content double-click the rule in the CSS panel. For starters the font changed by simply selecting a font and size, style and colour. Click Background and change the Background-color, alternatively click Browse and select a Background-image. Head to Box to add Padding to give the text some breathing space and try Border to adds borders. Delete the default text between <div class=”tooltipContent” id=”sprytooltip1”> and </div> and add custom text.
This is only one example of what can be achieved using the Spry Tooltip feature. The trigger for the tooltip is an image or text, both of which can be styled further. For example, add padding and borders to images and choose a new font for the text. The tooltip content is contained with a div tag so make sure to experiment with fonts, colours, borders, padding and background images to find the perfect tooltip for you.