v133 · dom
Hover Pattern Guide
All three tooltip trigger patterns — hover, focus, and click — implemented with popover=hint. Includes a side-by-side showing why hints have their own stacking lane: open a menu and hover a tooltip at the same time.
checking popover=hint…
Pattern 1: hover (mouseenter / mouseleave)
Hover the button to show tooltip
Shown on mouseenter. Uses
popover=hint — won't close open auto popovers.Pattern 2: focus (focusin / focusout)
Tab to or click the input to show tooltip
Enter a URL, path, or module specifier.
Tab away to dismiss.Pattern 3: click-toggle (popovertarget)
Click the button to toggle a persistent hint
This hint stays open until you click the button again or press Escape.
The stacking lane: hint + auto open simultaneously
Open the menu (an auto popover), then hover the info icon. The hint appears without closing the menu — because hints live in a separate stacking lane.
popover=hint Chrome 133
Hints don't dismiss auto popovers.
ⓘ
This hint opened without closing the menu above it.
popover=auto pre-133 / other
A second auto popover would close the first.
Opening this auto popover closes the menu above.
Event log
Interact with the demos above…