Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Popover examples · Standard

Compact Popover for React

A small question-mark button that opens a compact popover with a one-line tip.

Framework
UI library

A question-mark button that opens a panel just wide enough for two words. Use it for a quick hint beside a control, where a full popover would be more frame than content. In React, Base UI handles opening, dismissing and focus.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Why is this panel only as wide as its text?

PopoverContent sets w-auto and p-2, so the panel hugs the words Quick tip. PopoverTitle uses font-normal and text-xs, and that title is the only text in the panel.

How does the question-mark button become the trigger?

The trigger is a Button with variant="outline", size="sm", and aria-label="Quick tip". Its visible child is ?. Activating it opens the panel. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

Is Quick tip a heading people can see?

Yes. PopoverTitle is the visible text, with font-normal text-xs. The button's aria-label repeats Quick tip, because the button face is only ?.

When is a tooltip a better fit than this panel?

This panel is one short line that stays up until Escape or a click outside. A Tooltip fits a few words on hover or focus. The button here is size="sm".

How does this panel dismiss?

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.

What spacing does the panel use?

p-2 on PopoverContent is the padding around Quick tip. w-auto lets the title set the width. The trigger stays size="sm" variant="outline".

All 15 popover examples