Overview
The classes SK.UI.Tooltip and SK.UI.Tooltips allows you to create nice static tooltips when hovering an element. The text of the tooltip can be set as value from:
text property of the options object
title attribute of the element
Tooltips appear by default below the element (vetical orientation) or on the right of the element (horizontal orientation). But the position depends on current coordinates of the element relative to the viewport.
Include Resource Files
Please note that the file dependencies may already exist in the environment and you may not need to include these.
/Shared/Scripts/fat_tooltips.js
<script type="text/javascript" src="/Shared/Scripts/fat_tooltips.js"></script>
/Shared/UIComponents/Internal/Tooltips/css/tooltip.css
<link type="text/css" rel="stylesheet" href="/Shared/UIComponents/Internal/Tooltips/css/tooltip.css">
Options
element can be DOM Element or String with ID of element
elements can be list of DOM Elements or String of DOM Elements class
options is an object (or array with objects of the same type in SK.UI.Tooltips constructor) with the following possible properties:
Name | Description | Type | Default Value |
|---|---|---|---|
orientation | Alignment of the tooltip (can be 'vertical' or 'horizontal') | String | vertical |
text | If provided - the content of the tooltip (can be HTML); otherwise reads the title attribute of the element | String | - |
class_name | An additional value for the class attribute | String | - |
show_delay | Delay to show the tooltip in miliseconds | Number | 100 |
hide_delay | Delay to hide the tooltip in miliseconds | Number | 300 |
fade_duration | Duration of the animation for showing the tooltip | Number | 300 |
scroll_containers | Array with ID of elements on whose scrolling, a tooltip will move with the element. | Array (of Strings) | [] |
events | Show/Hide tooltip events | Object | { show : 'mouseenter', hide : 'mouseleave' } |
Methods
Name | Description | Parameters | Returns |
|---|---|---|---|
enable | Enable the tooltip | - | - |
disable | Disable the tooltip | - | - |
destroy | Destroying the tooltip | - | - |
Events
Name | Description | Arguments |
|---|---|---|
onShow | Fires when a new tooltip is displayed | - |
onHide | Fires when a tooltip was hided | - |
Examples
Initialize tooltips based on their class attribute. The text of tooltip will be the value of title attribute.
Initialize tooltips with SK.UI.Tooltip constructor.