Back to Vuetify

Tooltip directive

packages/docs/src/pages/en/directives/tooltip.md

4.1.01.5 KB
Original Source

Tooltip directive

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

<PageFeatures />

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.

<ExamplesUsage name="v-tooltip-directive" /> <PromotedEntry />

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.

<ExamplesExample file="v-tooltip-directive/args" />

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.

<ExamplesExample file="v-tooltip-directive/text" />

Other props

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

<ExamplesExample file="v-tooltip-directive/object-literals" />