Tooltip widget options
You can set options that let you customize the Tooltip widget’s behavior. You add the options to the constructor script. The following table provides a list of options.
|
Option |
Description |
Values |
Default Value |
|---|---|---|---|
|
closeOnTooltipLeave |
The content within the tooltip element may contain links or other interactive elements. Using this option will keep the tooltip element open until the mouse leaves the tooltip element (even if the mouse leaves the trigger element.) If set to false, the tooltip element closes when the mouse leaves the trigger area. Note:When enabling this option you should also use the hideDelay option to allow for extra time for the mouse to leave the tooltip element. |
Boolean: true or false |
false |
|
followMouse |
When set to true, the tooltip will move along with the mouse while hovering over the trigger element, using the specified offset values. |
Boolean: true or false |
false |
|
showDelay |
The delay in milliseconds before the tooltip element appears after it receives the mouseover event. |
number in milliseconds |
0 |
|
hideDelay |
The delay in milliseconds for the tooltip element to disappear after it receives the mouseout event. |
number in milliseconds |
0 |
|
hoverClass |
The specified class name will be appended to the class attribute for the trigger element upon hovering, and lets you style the trigger element differently for as long as the tooltip is visible. The value is removed from the trigger element when the tooltip disappears. |
CSS class name |
null |
|
offsetX |
Computes the tooltip’s horizontal position (x-axis) in relation to the mouse. The offset value is in pixels. |
string or number - X axis offset distance |
"20px" or "20" |
|
offsetY |
Computes the tooltip’s vertical position (y-axis) in relation to the mouse. The offset value is in pixels. |
string or number - Y axis offset distance |
"20px" or "20" |
|
useEffect |
The effect you want to use when the tooltip appears and disappears. The default value is empty (useEffect:""). |
"blind" or "fade" |
empty |
Example
<script type="text/javascript">
var tooltip_1 = new Spry.Widget.Tooltip("apDiv1", "#myDiv", {hideDelay:500, showDelay:200, hoverClass:"toolTipHover", useEffect:"blind", followMouse:true, offsetX:"30px", offsetY:20});
</script>