Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Tooltip with Title and Description for Vue

An outline Hover me button. Its tooltip has a bold title, Pro Feature, over a line about upgrading to Pro.

UI library: Ark UI

An outline button says Hover me. Its tooltip has a bold title, Pro Feature, and under it a smaller line about upgrading to Pro.

Use a title plus a line for a feature people have not met yet. A Hover Card fits if the note should include a link or a picture. On Vue, Ark UI does not bold the title for you.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Tooltip anatomy: content, positioner, arrow, trigger

Usage

<Tooltip>
  <TooltipTrigger :asChild="true">
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    <div class="flex flex-col gap-1">
      <p class="font-semibold">Pro Feature</p>
      <p class="text-xs">Upgrade to Pro to unlock this feature and many more.</p>
    </div>
  </TooltipContent>
</Tooltip>

FAQ

When should I use title plus description tooltips?

When the hover text needs a heading and an explanation: what a premium feature is and how to get it, what a control changes, why an action is unavailable. For a plain label, use a single line.

How long should tooltip descriptions be?

A sentence, two at most, like Upgrade to Pro to unlock this feature and many more. Anything longer belongs in a Popover.

Why does the description wrap?

The tooltip content caps its width at max-w-xs (320px), so a longer description wraps into short lines instead of stretching the tooltip. Pass another max-w-* class to change it.

How do I create visual hierarchy in tooltip content?

With weight and size: the title is font-semibold and the description stays at the tooltip's small text size, text-xs, with gap-1 between them. Both use the tooltip's text color, so they keep their contrast in light and dark mode.

Do screen readers announce structured tooltip content correctly?

The title and the description are read in order, top to bottom, when the trigger gets focus. The whole tooltip is linked to the trigger as its description.

Do structured tooltips work on mobile touch devices?

Not as a hover hint: touch screens have no hover. Make the explanation visible inline on small screens, or open it on tap with a Popover.

API Reference

Tooltip

Sets asChild. The rest is on the Tooltip page.

Button

Sets variant="outline". The rest is on the Button page.

All 8 tooltip examples