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.'">

autoauto-startauto-endtoptop-starttop-endrightright-startright-endbottombottom-startbottom-endleftleft-startleft-end

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

<b>Bold</b>

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:

import FloatingVue from 'floating-vue'

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>