Operation Manual

414
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
Constrain the width of tabbed panels
By default, the Tabbed Panels widget expands to fill available space. You can constrain the width of a Tabbed Panels
widget, however, by setting a width property for the accordion container.
1 Locate the .TabbedPanels CSS rule by opening the SpryTabbedPanels.css file. This rule defines properties for the
main container element of the Tabbed Panels widget.
You can also locate the rule by selecting the Tabbed Panels widget, and looking in the CSS Styles panel (Window >
CSS Styles). Make sure the panel is set to Current mode.
2 Add a width property and value to the rule, for example width: 300px;.
Working with the Spry Tooltip widget
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.