BlogPlaygroundOne

Tooltip directive

The v-tooltip directive is a shorthand way of adding tooltips to elements in your application.

Edit this page
Report a Bug
Copy Page as Markdown

Usage

The v-tooltip directive makes it easy to add a tooltip to any element in your application. It is a wrapper around the v-tooltip component.

<v-btn v-tooltip="'Tooltip'"></v-btn>

API

DirectiveDescription
v-tooltipThe Tooltip directive

Guide

The v-tooltip directive is a simple way to add a tooltip to any element in your application. It is a wrapper around the v-tooltip component.

Location

Location is set as a directive argument with the same syntax as the component’s location prop separated by a hyphen instead of a space.

Tooltip text

By default the tooltip will use the target element’s textContent, or you can pass another string as a directive value. Remember directive values are expressions so static strings must be quoted.

Other props

The v-tooltip directive can also accept an object of VTooltip props as a value (use camelCase keys).

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.