Easily create a nicely looking tooltip.

Usage

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.

Example


Hover me

Markup

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

Alignment

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.

Markup

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

data-uk-tooltip="{pos:'bottom-left'}"
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

Leave a comment