[heading size=”h2″ style=”uk-module-title”]Tooltips[/heading]
Tooltips are snippets that provide more information on hover. They can be added to any element by adding the data-uk-tooltip attribute and specifying the title in the same element.
[line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code]<a class=”uk-icon-dribbble” data-uk-tooltip href=”http://dribbble.com/arrowthemes” target=”blank” title=”dribbble”></a>[/code]
[line_break/] [heading size=”h3″ style=”uk-module-title”]Tooltip position[/heading]
You can specify the position of the tooltip by adding one of the following options to the data-uk-tooltip attribute
| Options | Description |
|---|---|
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 bottom. |
pos:'bottom-left' |
Aligns the tooltip to bottom left. |
pos:'bottom-right' |
Aligns the tooltip to bottom right. |
pos:'left' |
Aligns the tooltip to left. |
pos:'right' |
Aligns the tooltip to right. |
[line_break/]
[line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code]<a class=”uk-icon-dribbble” data-uk-tooltip=”{pos: 'bottom’}” href=”http://dribbble.com/arrowthemes” target=”blank” title=”dribbble”></a>[/code]