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>