Skip to content

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

Free

Simple Text Popover for Vue

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 Vue, 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 :asChild="true">
    <Button variant="outline">Open</Button>
  </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. Set asChild on PopoverTrigger and pass that one button. 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

Sets asChild. The rest is on the Popover page.

Button

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

All 15 popover examples