Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Popover examples · Standard

Info Icon Popover for React

An info icon button that opens a popover with a line of help text.

Framework
UI library

A ghost icon button with an info icon that opens a line of help text. Use it beside a field or a setting whose meaning isn't obvious, so the help is there on demand and out of the way otherwise. 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

What does the info panel contain?

PopoverTitle reads More information and has className="sr-only". The visible copy is one p: Helpful information goes here. The button's aria-label is the same phrase, More information.

How does the info icon become the trigger?

The trigger is a Button with variant="ghost", size="icon-md", and aria-label="More information". InfoIcon has aria-hidden="true". Activating the button opens the panel. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

How is the icon button named?

The button has aria-label="More information". InfoIcon is aria-hidden="true", so the icon is decorative. PopoverTitle repeats More information for the panel and is sr-only.

How much text is in this demo?

One sentence: Helpful information goes here. It sits in PopoverContent under the hidden title. This file sets no width class, so the panel keeps w-72.

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.

Which button variant is the trigger?

variant="ghost" and size="icon-md". The icon is the button's only visible child. The label lives in aria-label.

All 15 popover examples