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, posse appareat usu id, sit inermis pertinacia ei, doctus nusquam ex eum. Ex tota
legendos principes vim, sit at amet nemore doctus.Adolescens honestatis eos ne!

(07) 551 234 56

1234/56 Lorem i Consectetur, QLD 4000