Tooltip

Easily create a nice looking tooltip.

Table of contents

• Usage
• Alignment
• Delay
• Component options
• JavaScript
  • Initialization
  • Events
  • Methods
• Accessibility

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.

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

Alignment

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

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.

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.

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-animation-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.

JavaScript

Learn more about JavaScript components.

Initialization

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

Methods

The following methods are available for the component:

Show

Shows the Tooltip.

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.