v150 · HTML · Top-layer Stacking Demo

Top-layer Stacking Demo

Open combinations of popover=auto and popover=hint elements and watch how Chrome 150's new stacking rules allow a hint to appear above an already-open auto stack.

Chrome 150 required for the updated stacking model. The demo and monitor work in older browsers, but you may see older or partial behaviour when a hint is opened while an auto popover is already open.

live demo

Click the buttons to open popovers. The stack monitor shows which are open in the top layer.

Auto popover A
This is a popover=auto. Opening another auto will dismiss this one. But opening a hint should leave this open.
Auto popover B
Opening this dismisses Auto A because both are in the auto stack. If a hint was already open, this new unrelated auto also hides it.
Hint popover — open this after Auto A to see both remain in the top layer.

Top-layer stack (approximate):

Empty — no popovers open

what to observe

  1. Click Run Auto A → Hint. In Chrome 150 both remain open.
  2. Click Run Hint → Auto B. The hint is hidden because Auto B is a new unrelated auto.
  3. Open Auto B, then use Run Auto A → Hint again. The monitor resets and shows the coexistence state.
  4. In older browsers, showing the hint while a menu was open could close the menu or fail to model this stack relationship.

code

<!-- Auto popover (menu/drawer pattern) -->
<div id="menu" popover="auto">…</div>

<!-- Hint popover (tooltip pattern) -->
<div id="tip" popover="hint">…</div>

<script>
document.getElementById('menu').showPopover();
document.getElementById('tip').showPopover();
// Both remain open in the top layer.

// Opening a new unrelated auto hides an existing hint.
otherMenuPopover.showPopover();
</script>

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗