v-tooltip

Displays a tooltip that follows the cursor on hover. The tooltip auto-positions to stay within the viewport.

Usage

<!-- String binding -->
<button v-tooltip="'Click to save'">Save</button>

<!-- Using tip attribute -->
<span v-tooltip tip="Help text">?</span>

<!-- HTML content -->
<div v-tooltip="'<strong>Bold</strong> text'" html>Info</div>

<!-- Show alert on mobile tap -->
<span v-tooltip="'Details here'" alert-on-tap>?</span>

<!-- Disable tooltip conditionally -->
<span v-tooltip="isActive ? 'Active' : null">Status</span>

Options

Attribute	Description
tip	Tooltip text via HTML attribute (alternative to binding value)
html	Render tooltip content as HTML
alert-on-tap	Show an alert dialog on mobile tap instead of tooltip

Pass null as the binding value to conditionally disable the tooltip.

Style the tooltip with the .vf-tooltip CSS class.

Demo

<template>
    <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center">
        <button
            v-tooltip="'Click to save'"
            style="padding: 6px 14px; border: 1px solid #ccc; border-radius: 4px; background: var(--vp-c-bg-soft); cursor: pointer"
        >
            Hover me (string binding)
        </button>

        <span
            v-tooltip
            tip="Help text"
            style="
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                background: var(--vp-c-bg-soft);
                border: 1px solid #ccc;
                cursor: help;
                font-weight: 600;
            "
        >
            ?
        </span>

        <button
            v-tooltip="isActive ? 'Status: Active' : null"
            style="padding: 6px 14px; border: 1px solid #ccc; border-radius: 4px; background: var(--vp-c-bg-soft); cursor: pointer"
            @click="isActive = !isActive"
        >
            {{ isActive ? 'Active (has tooltip)' : 'Inactive (no tooltip)' }}
        </button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const isActive = ref(true);
</script>