Guide

Tooltip

Easily create a nice looking tooltip.

Usage

Set the v-vk-tooltip directive with a title to apply a tooltip to an element.

<span v-vk-tooltip="'Hello World'"></span>

Note title is the primary option and its key may be omitted if it's the only option in the directive value.

Alignment

Change the tooltip default alignment with a modifier or an option, where the later takes preference. The default value is top.

<vk-button v-vk-tooltip.topLeft="'Hello World'"></vk-button>
Position Description
top Aligns the tooltip to the top.
topLeft Aligns the tooltip to the top left.
topRight Aligns the tooltip to the top right.
bottom Aligns the tooltip to the bottom.
bottomLeft Aligns the tooltip to the bottom left.
bottomRight Aligns the tooltip to the bottom right.
left Aligns the tooltip to the left.
right Aligns the tooltip to the right.

Animation

Use one of the animations from the UIkit Animation component with the animation option to customize the in and out animations, without prefixes. Separate the animation out with a space and control the duration with the duration option.

<div v-vk-tooltip="{ 
  title: 'Hello World', 
  animation: 'scale-up fade', 
  duration: 1000 
}"></div>

Delay

If you want the tooltip to appear with a little delay, add the delay option in milliseconds.

<div v-vk-tooltip="{ title: 'Hello World', delay: 500 }"></div>

Options

Name Type Default Description
title String -- Tooltip main text. Is the primary option.
position String top Tooltip position relative to the element.
offset Number false The offset of the Tooltip.
animation String scale-up The display animations. Comma separate for animation out.
duration Number 100 The animation duration.
delay Number 0 The show delay.
cls String uk-active The active class.

Note You can learn about directives and how to apply options at the Directives guide.