Tooltip
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 |
