# Directive
In the template, use the v-tooltip
directive:
<button v-tooltip="'You have ' + count + ' new messages.'">
You can use a reactive property for the tooltip content:
<button v-tooltip="tooltipContent">
# Placement modifier
You can specify the tooltip placement as a modifier:
<button v-tooltip.bottom-start="'You have ' + count + ' new messages.'">
# Object notation
You can use an object instead of a simple string:
<button v-tooltip="{ content: 'You have ' + count + ' new messages.' }">
In this object, you can put any component props plus the additional options below.
# HTML content
By default, content is displayed as text to help prevent XSS attacks. If the tooltip content is deemed safe, you can turn on HTML with the html
option:
<button v-tooltip="{ content: '<b>Bold</b>', html: true }">
# Async content
The content
option accepts a function that returns a promise:
<button
v-tooltip="{
content: asyncMethod,
loadingContent: 'Please wait...',
}"
>Hover me!</button>
You can style the tooltip content when it's loading:
.v-popper--tooltip-loading .v-popper__inner {
color: #77aaff;
}
To pass custom arguments to the async method, use an arrow function:
<button
v-tooltip="{
content: () => asyncMethod('foo', 'bar'),
}"
>Hover me!</button>
# Manual trigger example
Use the triggers
and shown
options from the popper component:
<button
v-tooltip="{
content: 'Tooltip content here',
shown: isOpen,
triggers: [],
}"
>A button</button>
# Disabling tooltips
On mobile, you can disable the tooltips with the disabled
prop on the tooltip
theme:
FloatingVue.options.themes.tooltip.disabled = window.innerWidth <= 768
You can still override this value, just like you would for any other prop which has a default value in the configuration:
<button
v-tooltip="{
content: 'Tooltip content here',
disabled: false,
}"
>A button</button>