Easily create a nicely looking tooltip.
Usage
To apply this component, add the data-uk-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="uk-button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>Alignment
Add one of the following options to the data-uk-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="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>JavaScript options
This is an example of how to set options via attribute:
data-uk-tooltip="{pos:'bottom-left'}"| 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 | ” | Custom class to add on show |
activeClass |
string | ‘uk-active’ | Toggled active class |
Leave a comment