Elements

If you can dream it, you can do it

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