Adobe Dreamweaver CC 2014 v.13 - Manual (Page 304)

Working with the Spry Tooltip widget
To the top
To the top
To the top
About the Tooltip widget
Insert the Tooltip widget
Edit Tooltip widget options
Note: Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your
page, you cannot add new spry widgets.
About the Tooltip widget
The Spry tooltip widget displays additional information when a user hovers over a particular element on a web page. The additional content
disappears when the user stops hovering. You can also set tooltips to stay open for longer periods of time so that users can interact with content
inside the tooltip.
A Tooltip widget consists of the following three elements:
The tooltip container. This is the element that contains the message or content that you want to display when the user activates the tooltip.
The page element(s) that activates the tooltip.
The constructor script. This is JavaScript that tells Spry to create the tooltip functionality.
When you insert a Tooltip widget, Dreamweaver creates a tooltip container using div tags, and wraps the “trigger” element (the page element that
activates the tooltip) with span tags. Dreamweaver uses these tags by default, but the tags for the tooltip and the trigger element can be any tags,
as long as they are within the body of the page.
Keep the following points in mind when working with the Tooltip widget:
An open tooltip will close before the next one opens.
Tooltips persist while users hover over the trigger area.
There are no limitations as to what kinds of tags you can use for triggers and for tooltip content. (Block level elements are always advisable,
however, to avoid possible cross-browser rendering problems.)
By default, the tooltip appears 20 pixels down and to the right of the cursor. You can use the Horizontal and Vertical offset options in the
Property inspector to set a custom appearance point.
Currently there is no way to have a tooltip open when a page loads in a browser.
The tooltip widget requires very little CSS. Spry uses JavaScript to show, hide, and position the tooltip. You can achieve any other styling for the
tooltip with standard CSS techniques, as your page requires. The only rule contained in the default CSS file is a workaround for Internet Explorer 6
problems so that the tooltip appears above form elements or Flash objects.
For a more comprehensive explanation of how the Spry Tooltip widget works, including a full anatomy of the widget’s code, see
www.adobe.com/go/learn_dw_sprytooltip_en .
For a video tutorial on working with the Spry Tooltip widget, see www.adobe.com/go/lrvid4046_dw .
Insert the Tooltip widget
Select Insert > Spry > Spry Tooltip.
Note: You can also insert a Tooltip widget by using the Spry category in the Insert panel.
This action inserts a new Tooltip widget with a container for the tooltip content, and a placeholder sentence that acts as the tooltip trigger.
You can also select an existing element on the page (for example, an image), and then insert the tooltip. When you do this, the element you
selected acts as the new tooltip’s trigger. The selection must be a full tag element (for example an img tag or a p tag) so that Dreamweaver can
assign an ID to it if it does not already have one.
Edit Tooltip widget options
You can set options that let you customize the Tooltip widget’s behavior.
1. Hover over or place the insertion point in the tooltip content on the page.
2. Click the Tooltip widget’s blue tab to select it.
297