Working with the 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.

    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.

    3. Set options in the Tooltip widget Property inspector as desired.

    Name
    The name of the tooltip container. The container holds the content of the tooltip. By default Dreamweaver uses a div tag as the container.

    Trigger
    The element on the page that activates the tooltip. By default Dreamweaver inserts a placeholder sentence, surrounded by span tags, as the trigger, but you can select any element on the page that has a unique ID.

    Follow Mouse
    When selected, this option causes the tooltip to follow the mouse while hovering over the trigger element.

    Hide on Mouse Out
    When selected, this option keeps the tooltip open as long as the mouse is hovering over the tooltip (even if the mouse leaves the trigger element). Keeping the tooltip open is useful if you have links or other interactive elements in your tooltip. If this option is not selected, the tooltip element closes when the mouse leaves the trigger area.

    Horizontal Offset
    Computes the tooltip’s horizontal position in relation to the mouse. The offset value is in pixels, and the default offset is 20 pixels.

    Vertical Offset
    Computes the tooltip’s vertical position in relation to the mouse. The offset value is in pixels, and the default offset is 20 pixels

    Show Delay
    The delay in milliseconds before the tooltip appears after it has entered the trigger element. The default value is 0.

    Hide Delay
    The delay in milliseconds before the tooltip disappears after it has left the trigger element. The default value is 0.

    Effect
    The type of effect you want to use when the tooltip appears. Blind simulates a window blind that moves up and down to reveal and hide the tooltip. Fade fades the tooltip in and out. The default value is none.