Tooltip

Easily create a nice looking tooltip.

Usage

To apply this component, add the data-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 data-uk-tooltip="title: Hello World"></div>

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

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

Something's not working? Feel free to report an issue or edit this snippet .

<button class="uk-btn uk-btn-default" data-uk-tooltip="Hello World">
  Hover
</button>

Something's not working? Feel free to report an issue or edit this snippet .

<button className="uk-btn uk-btn-default" data-uk-tooltip="Hello World">
  Hover
</button>

Alignment

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

<button data-uk-tooltip="title: Hello World; pos: top-left"></button>

Attribute	Description
`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.

Something's not working? Feel free to report an issue or edit this snippet .

<div class="flex flex-wrap gap-2">
  <button class="uk-btn uk-btn-default" data-uk-tooltip="Hello World">
    Top
  </button>
  <button
    class="uk-btn uk-btn-default"
    data-uk-tooltip="title: Hello World; pos: top-left"
  >
    Top Left
  </button>
  <button
    class="uk-btn uk-btn-default"
    data-uk-tooltip="title: Hello World; pos: top-right"
  >
    Top Right
  </button>
  <button
    class="uk-btn uk-btn-default"
    data-uk-tooltip="title: Hello World; pos: bottom"
  >
    Bottom
  </button>
  <button
    class="uk-btn uk-btn-default"
    data-uk-tooltip="title: Hello World; pos: bottom-left"
  >
    Bottom Left
  </button>
  <button
    class="uk-btn uk-btn-default"
    data-uk-tooltip="title: Hello World; pos: bottom-right"
  >
    Bottom Right
  </button>
  <button
    class="uk-btn uk-btn-default"
    data-uk-tooltip="title: Hello World; pos: left"
  >
    Left
  </button>
  <button
    class="uk-btn uk-btn-default"
    data-uk-tooltip="title: Hello World; pos: right"
  >
    Right
  </button>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="flex flex-wrap gap-2">
  <button className="uk-btn uk-btn-default" data-uk-tooltip="Hello World">
    Top
  </button>
  <button className="uk-btn uk-btn-default" data-uk-tooltip="title: Hello World; pos: top-left">
    Top Left
  </button>
  <button className="uk-btn uk-btn-default" data-uk-tooltip="title: Hello World; pos: top-right">
    Top Right
  </button>
  <button className="uk-btn uk-btn-default" data-uk-tooltip="title: Hello World; pos: bottom">
    Bottom
  </button>
  <button className="uk-btn uk-btn-default" data-uk-tooltip="title: Hello World; pos: bottom-left">
    Bottom Left
  </button>
  <button className="uk-btn uk-btn-default" data-uk-tooltip="title: Hello World; pos: bottom-right">
    Bottom Right
  </button>
  <button className="uk-btn uk-btn-default" data-uk-tooltip="title: Hello World; pos: left">
    Left
  </button>
  <button className="uk-btn uk-btn-default" data-uk-tooltip="title: Hello World; pos: right">
    Right
  </button>
</div>

Delay

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

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

Something's not working? Feel free to report an issue or edit this snippet .

<button
  class="uk-btn uk-btn-default"
  data-uk-tooltip="title: Hello World; delay: 500"
>
  Hover
</button>

Something's not working? Feel free to report an issue or edit this snippet .

<button className="uk-btn uk-btn-default" data-uk-tooltip="title: Hello World; delay: 500">
  Hover
</button>

Component options

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

Option	Value	Default	Description
`title`	String		Tooltip text.
`pos`	String	`top-center`	Tooltip position.
`offset`	Number	`false`	Tooltip offset.
`animation`	String	`uk-anmt-scale-up`	Space-separated names of animations. Comma-separated for animation out.
`duration`	Number	`100`	The animation duration.
`delay`	Number	`0`	The show delay.
`cls`	String	`uk-active`	The active class.
`container`	String	`body`	Define 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 data-uk-tooltip="Hello World"></span>

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.tooltip(element, options);

Events

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

Name	Description
`beforeshow`	Fires before an item is shown. Can prevent showing by calling `preventDefault()` on the event.
`show`	Fires after an item is shown.
`shown`	Fires after the item’s show animation has completed.
`beforehide`	Fires before an item is hidden. Can prevent hiding by calling `preventDefault()` on the event.
`hide`	Fires after an item’s hide animation has started.
`hidden`	Fires after an item is hidden.

Example

UIkit.util.on(document, "show", ".uk-tooltip.uk-active", function () {
  // do something
});

Methods

The following methods are available for the component:

Show

UIkit.tooltip(element).show();

Shows the Tooltip.

Hide

UIkit.tooltip(element).hide();

Hides the Tooltip.

Accessibility

The Tooltip component adheres to the Tooltip Widget WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.

The element with the tooltip has an ID.
The tooltip has the tooltip role and the aria-describedby property set to the ID of the element with the tooltip.

On This Page
Usage
Alignment
Delay
Component options
JavaScript
Accessibility