Skip to content

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

Free

Simple Info Tooltip Hover Card for Vue

A help icon beside Storage Limit opens one sentence: the plan includes 100GB, and an upgrade adds more.

UI library: Ark UI

Storage Limit sits beside a help icon. The card is a single sentence about 100GB of storage and upgrading for more space. It has no title.

Use it for a short note that is still more than a hint. A Tooltip is enough for one brief line with no extra layout. In Vue, Ark UI opens the card after a short pause.

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

Hover Card anatomy: trigger, positioner, arrow, content

Usage

<div class="flex items-center gap-2">
  <span class="text-sm">Storage Limit</span>
  <HoverCard>
    <HoverCardTrigger :asChild="true">
      <button
        aria-label="About the storage limit"
        class="text-muted-foreground"
        type="button"
      >
        <CircleHelpIcon aria-hidden="true" class="size-4" />
      </button>
    </HoverCardTrigger>
    <HoverCardContent>
      <p class="text-sm">
        Your current plan includes 100GB of storage. Upgrade to get more space for your files.
      </p>
    </HoverCardContent>
  </HoverCard>
</div>

FAQ

What is in the card?

One text-sm paragraph: the plan includes 100GB of storage, upgrade for more. No title, since the label beside the icon already says what it is about.

How is the help icon made the trigger?

HoverCardTrigger takes as-child, and the demo passes the help icon.

How is the icon button named?

The CircleHelpIcon is hidden from assistive tech, so the button carries aria-label="About the storage limit".

How wide is the card?

The default hover card width. Set a width class such as w-80 on the card to fit longer content.

How do I change how fast the card opens and closes?

The card opens a moment after the pointer rests on the trigger and stays up long enough for the pointer to move into it. Both delays are in milliseconds. Set openDelay and closeDelay on HoverCard; they default to 10 and 100. positioning picks another side than the bottom.

Does the card open from the keyboard and on touch screens?

Focusing the icon button opens the card, moving focus away or pressing Escape closes it. The icon button carries an aria-label, so it is announced by name. Touch screens have no hover, so keep what matters reachable elsewhere, or use a Popover when the card has to open on a tap.

API Reference

Hover Card

Sets asChild. The rest is on the Hover Card page.

All 20 hover card examples