shadcn.io is an independent project built on shadcn/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 Svelte, Ark UI opens the card after a short pause.
Installation
Anatomy
Usage
<div class="flex items-center gap-2"><span class="text-sm">Storage Limit</span><HoverCard><HoverCardTrigger>{#snippet asChild(props)}<button {...props({ "aria-label": "About the storage limit", class: "text-muted-foreground", type: "button" })}><CircleHelpIcon aria-hidden="true" class="size-4" /></button>{/snippet}</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 renders the help icon through its asChild snippet.
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
No extra props in this demo. The rest is on the Hover Card page.
