popovers-tooltipslisted
Install: claude install-skill mickzijdel/dev-hooks
# Popovers & tooltips
Use this skill to build popovers, tooltips, dropdowns and menus that stay **on-screen** and
aren't clipped.
## Core principle: Tailwind styles, it does NOT position
Tailwind has no positioning logic — it only paints. Don't hand-roll `top`/`left` math from
`getBoundingClientRect()`; you'll reinvent collision detection badly and the popover will open
off-screen. Reach for a positioner that does **collision detection** (flip + shift) and render
the floating element in the **top layer / a portal** so an ancestor's `overflow`, `transform`,
or `z-index` can't clip it.
## Why popovers go off-screen (the failure modes)
- No flip/shift fallback, so a bottom-anchored tooltip near the viewport edge overflows.
- Clipped by an ancestor with `overflow:hidden`, a `transform`, or its own stacking context.
- Positioned `absolute` inside a scrolled container, so it drifts on scroll.
- Never re-positioned on scroll/resize.
## The four things that fix it
1. `offset()` — gap from the reference.
2. `flip()` — pick the side with room.
3. `shift({ padding })` — slide along the axis to stay in the viewport.
4. `arrow()` + `autoUpdate()` — arrow placement, and re-position on scroll/resize/layout.
Plus: render in the **top layer** (native `popover`) or **portal to `<body>`** to escape
clipping.
## Primary — Floating UI + Stimulus (Rails 8 / Hotwire)
[Floating UI](https://floating-ui.com) (`@floating-ui/dom`, the framework-agnostic successor
to Popper) is the right tool i