### Tooltip

#### Description

The Spry Tooltip widget consists of a tooltip containter, and one or many triggers. When the user mouses over the trigger, the tooltip container is shown. The tooltip is hidden when the user mouses out.

#### Required Files

> SpryTooltip.js

> SpryTooltip.css

#### Reference File

> SpryTooltip.html

#### Sample Files

> SpryTooltipSample.html

####

### Structure

The widget structure is as follows:

    <tooltip trigger(s)>
    <tooltip content>

The markup used in this structure can be most any HTML, as long as it follows the rules for nesting, etc.

Using the provided files, the default mark up is:

    <div id="trigger">This is the trigger element.</div>
    <div id="tooltip">This is the tooltip element.</div>
    <script type="text/javascript">
       var tt1 = new Spry.Widget.Tooltip("tooltip","#trigger");
    </script>

### Constructor

Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.

    <script type="text/javascript">
       var tt1 = new Spry.Widget.Tooltip("tooltip","#trigger");
    </script>

#### Basic Constructor

A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.

    <script type="text/javascript">
       var widgetname = new Spry.Widget.Tooltip("id of tooltip container","CSS Selector for triggers");
    </script>

#### Constructor Options

Constructor options allow users to specify certain attributes of the widget.

Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).

     <script type="text/javascript">
       var widgetname = new Spry.Widget.Tooltip("id of widget container",{option1:value, option2:value, option3:"value"});
     </script>

Option Name | Description | Default | Values
--- | --- | --- | ---
closeOnTooltipLeave | The content within the "tooltip" element may contain links or other interactive elements. Using this option will keep the "tooltip" element open even if the mouse leave the "trigger" element. The "tooltip" element will close when the mouse exits from the tooltip area. | false | Boolean: true or false
followMouse | When set to "true", the tooltip element position will move with the mouse inside the "trigger" element, using the specified offset values. | false | Boolean: true or false
hideDelay | The delay in milliseconds for the tooltip element to hide after the mouseout event is received. | 0 | number in milliseconds
hoverClass | The specified class name will be appended to the 'class' attribute for the "trigger" element on mouse over. This value is removed when the "tooltip" element is hidden. | null | "class name"
offsetX | The offset value given as an integer or in pixels for the x-axis. Using this value and the mouse entering position the widget compute the "tooltip" element horizontal position. | 20px | "20px" or 20
offsetY | The offset value given as an integer or in pixels for the y-axis. Using this value and the mouse entering position the widget compute the "tooltip" element vertical position. | 20px | "20px" or 20
showDelay | The delay in milliseconds for the tooltip element display after the mouseover event is received. | 0 | number in milliseconds
useEffect | could receive two parameters: 'blind' and 'fade'. Default value is none: useEffect:"" | null | "blind" or "fade"

     <script type="text/javascript">
       var ac1 = new Spry.Widget.Tooltip("myTooltip",{followMouse:true, hideDelay:200});
     </script>

Recall that javascript is case sensitive.

There are no methods for the tooltip widget.

Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.