Shortcodes

Tooltips

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.


markup
<a class="uk-icon-dribbble" data-uk-tooltip href="http://dribbble.com/arrowthemes" target="blank" title="dribbble"></a>

Tooltip position

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.


markup
<a class="uk-icon-dribbble" data-uk-tooltip="{pos: 'bottom'}" href="http://dribbble.com/arrowthemes" target="blank" title="dribbble"></a>