Easily create a nicely looking tooltip.


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.


Hover me


<button class="uk-button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>


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.


<button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>

JavaScript options

This is an example of how to set options via attribute:

Option Possible value Default Description
offset integer 5 Offset to the source element
pos string 'top' Tooltip position
animation boolean false Fade in tooltip
delay integer 0 Delay tooltip show in ms
cls string '' Custom class to add on show
activeClass string 'uk-active' Toggled active class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

JFlickr Module