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:

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>