Popover=hint behavior changes

concepts

1. Top-layer Stacking Demo

   Open combinations of popover=auto and popover=hint elements and watch how the top-layer stack is managed under the new Chrome 150 rules. See when a hint is auto-dismissed versus when it persists alongside an auto.

2. Hint vs Auto Reference

   Side-by-side comparison of every behavioural difference between popover=auto and popover=hint after Chrome 150's stacking-model revision — dismissal triggers, nesting rules, programmatic show/hide, and light-dismiss semantics.

3. Tooltip over Menu

   A realistic toolbar with dropdown menus (popover=auto) and icon-button tooltips (popover=hint). Open a dropdown, then hover an icon — in Chrome 150 the tooltip can appear without closing the menu. A live top-layer event log tracks every open and close.

4. Layer Inspector

   Open and close any combination of popover=auto, popover=hint, and popover=manual elements using dedicated toggle buttons. A live top-layer stack diagram updates in real time, colour-coded by type. An event log annotates each toggle with the Chrome 150 stacking rule that applies.

   Live API Top layer Debugging

5. Menu + Tooltip Coexist

   A full app toolbar with File/Edit/View dropdown menus (popover=auto) and search/notification/account icon tooltips (popover=hint). In Chrome 150, opening a menu and then hovering an icon keeps both popovers in the top layer simultaneously. A timestamped event log proves which stacking rules apply at each interaction.

   Interactive Popover API UI patterns

6. Keyboard Accessibility Test

   Navigate a toolbar entirely by keyboard: Tab moves focus, Enter/Space opens dropdown menus (popover=auto), and popover=hint tooltips appear automatically on focus. In Chrome 150, a focused hint and an open menu coexist in the top layer. A live checklist validates seven accessibility criteria — focus visibility, hint-on-focus, hint-on-blur, Escape handling, and aria-expanded — as you interact.

   Keyboard nav Accessibility ARIA

why it shipped

The original popover=hint semantics, while well-intentioned, produced confusing interactions when hints appeared alongside auto popovers. Chrome 150 tightens the rules: a hint popover can sit above an already-open auto stack without disturbing it. A new unrelated auto still hides an already-open hint, which keeps menu changes predictable while allowing tooltip-over-menu layering.

what changed

• A popover=hint sits above an open auto stack in the top layer and can be shown without closing that stack
• Opening a new unrelated popover=auto still force-hides an open popover=hint
• Closing an auto hides related hints instead of leaving orphaned tooltip UI
• Light-dismiss follows the active top-layer relationship so hints do not become orphaned from their related menu UI
• hint cannot be shown programmatically from .showPopover() in some contexts — it must be triggered via the invoker pattern

references

• ChromeStatus entry
• MDN — Popover API
• HTML spec — Popover