Skip to content

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

Free

Info Icon Popover for Solid

A ghost info button that opens one line of help, with the title More information hidden from sight.

UI library: Ark UI

A ghost icon button shows an info icon. It opens a panel whose visible text is Helpful information goes here. The title More information is there for screen readers and is not shown.

Use it beside a label whose meaning is not obvious, so the help stays out of the way. A hint that should follow the pointer belongs in a Tooltip. In Solid, Ark UI does not supply the help text.

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

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

Usage

<Popover>
    <PopoverTrigger asChild={props => <Button {...props()} aria-label="More information" size="icon-md" variant="ghost">
        <InfoIcon aria-hidden="true" />
      </Button>} />
    <PopoverContent>
      <PopoverTitle class="sr-only">More information</PopoverTitle>
      <p>Helpful information goes here.</p>
    </PopoverContent>
  </Popover>

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. asChild is a function on PopoverTrigger that returns the button, and PopoverContent is 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.

API Reference

Popover

Sets asChild and props. The rest is on the Popover page.

Button

Sets props, aria-label="More information", size="icon-md" and variant="ghost". The rest is on the Button page.

All 15 popover examples