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


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:

<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:

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

# 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'

<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