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`

```bash
scripts/script.sh intro
```

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

### `api`

```bash
scripts/script.sh api
```

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

### `positioning`

```bash
scripts/script.sh positioning
```

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

### `tooltip`

```bash
scripts/script.sh tooltip
```

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

### `dropdown`

```bash
scripts/script.sh dropdown
```

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

### `css`

```bash
scripts/script.sh css
```

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

### `accessibility`

```bash
scripts/script.sh accessibility
```

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

### `libraries`

```bash
scripts/script.sh libraries
```

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

### `help`

```bash
scripts/script.sh help
```

### `version`

```bash
scripts/script.sh version
```

---

*Powered by BytesAgain | bytesagain.com | hello@bytesagain.com*