Tooltip

Tooltip is used as small contextual information popup that is shown to user when specific controller element is hovered.

Simple usage

Tooltip requires two things in order to work correctly. An element which will be used as controller and activate the tooltip when user hovers over it and a unique id prop which will be used to register the tooltip.

The handler element must use v-tooltip directive and provide string value of the unique id.

Note

If you are providing string value directly to v-tooltip, make sure to wrap it inside single quotes, otherwise the value bound to v-tooltip will be treated as variable.

Let's see how you can add tooltip to a button:

Sample tooltip text

<Button v-tooltip="'test-tooltip'">Hover over me</Button>
<Tooltip id="test-tooltip"><span>Sample tooltip text</span></Tooltip>

You can also place any kind of html or components inside tooltip:

H3 title

Some sub text

<Button v-tooltip="'test-tooltip-1'">Hover over me 2</Button>
<Tooltip id="test-tooltip-1">
    <div class="p-3">
        <h3>H3 title</h3>
        <span>Some sub text</span>
    </div>
</Tooltip>

Custom placement

If you wish to force specific placement position for the tooltip, you can provide object instead of string to v-tooltip. This configuration object must contain id and placement keys. The placement must be on of the supported PopperJS (opens new window) placement options: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'

Always top-start

Always right-end

<Button v-tooltip="{id:'test-tooltip-2', placement:'top-start'}">Hover over me 3</Button>
<Tooltip id="test-tooltip-2">Always <b>top-start</b></Tooltip>

<Button v-tooltip="{id:'test-tooltip-3', placement:'right-end'}">Hover over me 4</Button>
<Tooltip id="test-tooltip-3">Always <b>right-end</b></Tooltip>

Props

name	description	required	type
id	tooltip id, must be unique	true	String