Skip to content

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

Free

Compact Popover for Ark UI

A small question-mark button that opens a panel just wide enough for the two words Quick tip.

A small outline button shows a question mark. It opens a panel that hugs the words Quick tip, with little padding around them.

Use it for a hint that is only a few words, beside the control it explains. A sentence that should vanish on its own belongs in a Tooltip. In React, Ark UI does not write the tip.

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

Anatomy

Popover anatomy: trigger, title, positioner, arrow, description, content

Usage

<Popover>
  <PopoverTrigger asChild>
    <Button aria-label="Quick tip" size="sm" variant="outline">
      ?
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-2">
    <PopoverTitle className="font-normal text-xs">Quick tip</PopoverTitle>
  </PopoverContent>
</Popover>

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. Set asChild on PopoverTrigger and pass that one button. PopoverContent is 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".

API Reference

Popover

Sets asChild. The rest is on the Popover page.

Button

Sets aria-label="Quick tip", size="sm" and variant="outline". The rest is on the Button page.

All 15 popover examples