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.

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

 
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" class="notranslate" class="notranslate" target="blank" title="dribbble">



5
6
7
8
9
10
11