Skip to content

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

Free

Simple Text Popover for Svelte

An Open button that shows one sentence in a panel. The title Details is hidden and read by screen readers.

UI library: Ark UI

Open shows the sentence This is a simple popover with text content. The title Details is hidden and names the panel for screen readers.

Use it for a note that should stay up until it is dismissed. A tip that should vanish when the pointer leaves belongs in a Tooltip. In Svelte, Ark UI does not supply the sentence.

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>{#snippet asChild(props)}<Button {...props()} variant="outline">Open</Button>{/snippet}</PopoverTrigger><PopoverContent><PopoverTitle class="sr-only">Details</PopoverTitle><p>This is a simple popover with text content.</p></PopoverContent></Popover>

FAQ

What is in this panel?

PopoverTitle reads Details and has className="sr-only", so the name is for assistive tech. The visible line is a p: This is a simple popover with text content. The trigger label is Open.

How does the Open button become the trigger?

The trigger is a Button with variant="outline" and the label Open. Activating it opens the panel. asChild is a snippet on PopoverTrigger that renders the button, and PopoverContent is the panel.

When should this be a tooltip?

This panel is one sentence that stays open until it is dismissed. A Tooltip fits a few words on hover or focus. The sr-only title gives this panel a name.

How wide is the panel?

This demo sets no width on PopoverContent, so it keeps the part's w-72. The title is visually hidden, and the paragraph is the only text someone sees.

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.

Why is the title visually hidden?

PopoverTitle with className="sr-only" names the panel Details without a visible heading. The sentence people read is the p under it. The Open button is the visible control.

API Reference

Popover

No extra props in this demo. The rest is on the Popover page.

Button

Sets props and variant="outline". The rest is on the Button page.

All 15 popover examples