Tooltip

Tooltip

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.

AttributeDescriptionExample
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'}"
OptionPossible valueDefaultDescription
offsetinteger5Offset to the source element
posstring‘top’Tooltip position
animationbooleanfalseFade in tooltip
delayinteger0Delay tooltip show in ms
clsstringCustom class to add on show
activeClassstring‘uk-active’Toggled active class