Tooltip is applied to an element with v-tooltip directive where the value of the directive defines the text of the tooltip.

Position of the tooltip is specified using a modifier. Valid values are top, bottom, right and left. Default position of the tooltip is right.

Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.

Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.

Tooltip is hidden when mouse leaves the target element, in cases where tooltip needs to be interacted with, set autoHide to false to change the default behavior.

Tooltip can use either a plain text or rich HTML content by setting escape to false.

Tooltip is also configurable by passing an object as the directive value.

Screen Reader

Tooltip component uses tooltip role and when it becomes visible the generated id of the tooltip is defined as the aria-describedby of the target.

Keyboard Support