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>
                    🔽 Show more