Easily create a nice looking tooltip.


Easily create a nice looking tooltip.


To apply this component, add the uk-tooltip attribute to an element. You also need to add the title: TEXT option to the attribute, whose value will represent your tooltip’s text.

<div uk-tooltip="title: Hello World"></div>

If title is the only option in the attribute value, you can also use uk-tooltip="TEXT"

<div uk-tooltip="Hello World"></div>


Add one of the following options to the uk-tooltip attribute to adjust the tooltip’s alignment.

<button uk-tooltip="title: Hello World; pos: top-left"></button>
pos: topAligns the tooltip to the top.
pos: top-leftAligns the tooltip to the top left.
pos: top-rightAligns the tooltip to the top right.
pos: bottomAligns the tooltip to the bottom.
pos: bottom-leftAligns the tooltip to the bottom left.
pos: bottom-rightAligns the tooltip to the bottom right.
pos: leftAligns the tooltip to the left.
pos: rightAligns the tooltip to the right.


If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds.

<div uk-tooltip="title: Hello World; delay: 500"></div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

titleString``Tooltip text.
posStringtopTooltip position.
offsetNumberfalseTooltip offset.
animationStringuk-animation-scale-upSpace-separated names of animations. Comma-separated for animation out.
durationNumber100The animation duration.
delayNumber0The show delay.
clsStringuk-activeThe active class.
containerStringbodyDefine a target container via a selector to specify where the tooltip should be appended in the DOM.

title is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

<span uk-tooltip="Hello World"></span>


Learn more about JavaScript components.


UIkit.tooltip(element, options);


The following events will be triggered on elements, which are injected by this component:

beforeshowFires before an item is shown. Can prevent showing by calling preventDefault() on the event.
showFires after an item is shown.
shownFires after the item’s show animation has completed.
beforehideFires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hideFires after an item’s hide animation has started.
hiddenFires after an item is hidden.


UIkit.util.on(document, 'show', '', function() {
  // do something


The following methods are available for the component:



Shows the Tooltip.



Hides the Tooltip.