v-tooltip
Updated on Sep 5, 2025 2 minutes to readThe v-tooltip directive allows you to show a tooltip on an element.
- You can provide the tooltip content as a string or an HTML element.
- Tooltip position and triggers can be configured using modifiers.
- Supports automatic updates when the tooltip content changes.
• Modifiers
| Modifier | Description |
|---|---|
| top | Display tooltip above the element (default). |
| bottom | Display tooltip below the element. |
| left | Display tooltip to the left of the element. |
| right | Display tooltip to the right of the element. |
| auto | Let the tooltip decide the best placement automatically. |
| click | Show tooltip on click. |
| hover | Show tooltip on hover. |
| focus | Show tooltip on focus. |
| html | Render the tooltip content as HTML instead of plain text. |
- If no trigger modifiers (
click,hover,focus) are provided, bothhoverandfocusare used by default. - Tooltip content can be updated dynamically; the directive will refresh it automatically.
- Use html modifier if you want to include HTML in the tooltip.
- Multiple modifiers can be combined for placement and triggers.
• Example
<template>
<!-- Simple tooltip on hover/focus -->
<button v-tooltip="'Hello world!'">Hover me</button>
<!-- Tooltip on click, positioned on the right -->
<button v-tooltip.right.click="'Clicked!'">Click me</button>
<!-- Tooltip with HTML content -->
<button v-tooltip.html="'<b>Bold</b> tooltip'">Hover me</button>
</template>