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