# Popover Flyout

> Popover design, flyout menus, and hoverable content panels.

- Skill: `dragoon0x/popover-flyout` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/popover-flyout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/popover-flyout/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/popover-flyout

---


# Popover & Flyout

## Popover
- Triggered by click (not hover)
- Contains rich content (text, links, mini-forms)
- Close: click outside, Escape, or explicit close button
- One popover open at a time
- Position near trigger, flip at viewport edges
- Arrow pointing to trigger element

## Flyout Menu
- Triggered by hover (desktop) or click (mobile)
- Contains navigation links or sub-options
- Show after brief delay (100-200ms hover)
- Keep open while cursor is within bounds
- Diagonal movement tolerance (don't close when moving diagonally to submenu)

## Design Rules
1. Max width: 320px for most popovers
2. Consistent shadow and border treatment
3. Don't nest popovers (if you need this, rethink the UX)
4. Mobile: convert to bottom sheet or full-screen
5. Content should be scannable (not a wall of text)

## Accessibility
- `role="dialog"` for interactive popovers
- `aria-expanded` on trigger
- Focus trap for interactive content
- Escape to close