Tooltip
Easily create a nicely looking tooltip.
Usage
To apply this component, add the data-f-tooltip attribute to an element. You also need to add a title attribute, whose value will represent your tooltip's text.
Example
Hover me
Markup
<button class="f-btn" data-f-tooltip title="">...</button>
<span data-f-tooltip title="">...</span>Alignment
Add one of the following options to the data-f-tooltip attribute to adjust the tooltip's alignment.
| Attribute | Description | Example |
|---|---|---|
pos:'top' |
Aligns the tooltip to the top. | |
pos:'top-left' |
Aligns the tooltip to the top left. | |
pos:'top-right' |
Aligns the tooltip to the top right. | |
pos:'bottom' |
Aligns the tooltip to the bottom. | |
pos:'bottom-left' |
Aligns the tooltip to the bottom left. | |
pos:'bottom-right' |
Aligns the tooltip to the bottom right. | |
pos:'left' |
Aligns the tooltip to the left. | |
pos:'right' |
Aligns the tooltip to the right. |
Markup
<button class="f-btn" data-f-tooltip="{pos:'bottom-left'}" title="">...</button>JavaScript options
This is an example of how to set options via attribute:
<button data-f-tooltip="{pos:'bottom-left'}">...</button>| Option | Possible value | Default | Description |
|---|---|---|---|
offset |
integer | 5 | Offset to the source element |
pos |
string | top | Tooltip position |
animation |
boolean | false | Fade in tooltip |
delay |
integer | 0 | Delay tooltip show in ms |
cls |
string | empty string | Custom class to add on show |
activeClass |
string | f-active | class added when tooltip is active |
src |
function | function which returned cached title | this shouldn't need to be changed, but is accessible as an option |
