Tooltips
The v-tooltip component is useful for conveying information when a user hovers over an element. You can also programmatically control the display of tooltips through a v-model. When activated, tooltips display a text label identifying an element, such as a description of its function.
Usage
Tooltips can wrap any element.
<v-tooltip text="Tooltip">
<template v-slot:activator="{ props }">
<v-btn v-bind="props">Hover Over Me</v-btn>
</template>
</v-tooltip>API
| Component | Description |
|---|---|
| v-tooltip | Primary Component |
Examples
Props
Interactive
The interactive prop prevents the tooltip from closing during mouse interactions. For example, if the tooltip contains text that users might want to click or copy.
Location
Use the location prop to specify on which side of the element the tooltip should show. Read more about location here.
Open on Click
The open-on-click prop allows tooltip to open when the activator is clicked. Useful for touch devices or when manual triggering is preferred.
Visibility
Tooltip visibility can be programmatically changed using v-model.
Misc
Tooltip at cursor
Tooltip can appear where the cursor is by setting the target prop to cursor. This is currently only available with open-on-click.