UI Skillbook
2

Popover

A non-modal surface anchored to a trigger for contextual content people can interact with.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-popover and follow the Siteplane Popover skill it prints for this task.

Paste this into your agent.

Popover holds small interactive content tied to a control, such as a quick feedback form, a notification list or a filter. People can still use the page behind it. It also works as a click-to-open hint for info buttons.

Install

bashnpx shadcn@4.18.0 add @siteplane/popover

Import it from @/siteplane/components/popover. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Tooltip: Pick Tooltip instead for a short, non-interactive label on hover or focus.
  • vs Dialog: Pick Dialog instead when the task needs the whole screen's focus.
  • vs Menu: Pick Menu instead when the content is only a list of actions.
  • vs Preview Card: Pick Preview Card instead for a hover preview of a link's destination.

Rules

  • Set showCloseButton on PopoverPopup, or add PopoverClose, when the content is long enough that people look for a way out.
  • Use side and align to place it; it flips when there is no room.
  • Use tooltipStyle for an info hint that must open on tap as well as hover, adding openOnHover on the trigger.
  • Popover is not modal, so keep tasks people must finish before continuing out of it.

Reference

  • Popover docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Overlays & disclosure. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-popover

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Accessible Focus Statesby UI Skillbook

Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.

Accessibility

Better Accessibilityby jakubkrehel

Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.

AccessibilityExternalGitHub stars: 9.2K

Build Primitiveby PrototyperAI

Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.

AccessibilityExternalGitHub stars: 7

Link Purposeby AccessLint

Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.

AccessibilityExternalGitHub stars: 114

Back to Siteplane UI