component-popover

What problem does it solve?

It helps teams avoid building inconsistent, inaccessible popover/tooltip UI by generating a standards-aligned React component that uses the native HTML Popover API with correct accessibility behaviors.

Core Features & Use Cases

• Native HTML Popover implementation: Uses the popover attribute, popovertarget, and showPopover() / hidePopover() so dismissal and top-layer rendering are handled by the browser.
• Accessible interaction model: Provides an accessible trigger (with aria-label), a close button with aria-label, keyboard behavior via native toggle/escape handling, and predictable focus return on close.
• Configurable behavior and placement: Supports auto (light dismiss) and manual (explicit close) modes, placement hints (top|bottom|left|right), optional arrow rendering, and controlled or uncontrolled open state.

Quick Start

Ask the skill to add a Popover with an anchor/trigger element label, the popover content to render, the placement direction, and whether it should use light-dismiss or a manual close button.