Tooltip
A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/tooltip.jsonUsage
Use tooltip for brief, supplementary hints on icon buttons or truncated content — not for content
that's essential to completing a task. Wrap your app (or a section of it) once in
TooltipProvider so nested tooltips share timing behavior.
<script setup lang="ts">
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
</script>
<template>
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>
<button>Hover me</button>
</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</template>