popover

name	popover
version	1.0.0
description	Popover UI reference — the HTML Popover API, tooltip patterns, positioning strategies, and accessible floating elements. Use when building popovers, tooltips, dropdowns, or understanding the new Popover API.
author	BytesAgain
homepage	https://bytesagain.com
source	https://github.com/bytesagain/ai-skills
tags	["popover","tooltip","dropdown","floating-ui","top-layer","positioning"]
category	frontend

Popover — Popover & Tooltip Reference

Quick-reference skill for popovers — the HTML Popover API, floating elements, positioning, and accessibility.

When to Use

• Using the native HTML Popover API (popover attribute)
• Building accessible tooltips and dropdowns
• Positioning floating elements (Floating UI / Popper.js)
• Understanding popover vs modal vs tooltip semantics
• Handling edge cases: viewport clipping, scroll, resize

Commands

intro

scripts/script.sh intro

What popovers are, popover vs tooltip vs modal, when to use each.

api

scripts/script.sh api

HTML Popover API — popover attribute, popovertarget, showPopover, events.

positioning

scripts/script.sh positioning

Positioning strategies — Floating UI, anchor positioning, flip, shift, offset.

tooltip

scripts/script.sh tooltip

Tooltip patterns — hover, focus, delay, arrow, accessible tooltips.

dropdown

scripts/script.sh dropdown

Dropdown menus — trigger, keyboard nav, nested menus, ARIA.

css

scripts/script.sh css

Popover CSS — anchor positioning, animations, @starting-style.

accessibility

scripts/script.sh accessibility

Accessible popovers — ARIA patterns, keyboard interaction, live regions.

libraries

scripts/script.sh libraries

Popover libraries — Floating UI, Radix, Headless UI, Tippy.js.

help

scripts/script.sh help

version

scripts/script.sh version

---

Powered by BytesAgain | bytesagain.com | [e-mail]