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.