Why does the inert attribute disable a popover even when it is promoted to the Top Layer?

Question

I’m implementing a "Guided Tour" feature using the native HTML Popover API. To ensure the user doesn't click background elements during the tour, I am applying the inert attribute to my <main> wrapper.

However, I’ve hit a wall. One of my popovers is nested deep inside the <main> container for component scoping reasons. Even though the popover is technically promoted to the Top Layer (appearing above everything else in the stacking order), I cannot click any buttons inside the popover or even dismiss it via keyboard when inert is active on the parent.

<main id="app-content">
  <button>Background Link</button>

  <div id="tour-step-1" popover>
    <p>Click 'Next' to continue</p>
    <button onclick="nextStep()">Next</button> 
  </div>
</main>

<button onclick="startTour()">Start Tour</button>

What I've tried:

Calling showPopover() on the div. It appears visually on top of everything.
Setting document.getElementById('app-content').inert = true;.
The Issue: Once inert is true, the "Next" button inside the popover becomes unclickable, even though it's visually in the Top Layer and not clipped by the parent.

I thought the Top Layer was independent of the DOM tree's limitations. If a popover is "out of the flow," why is it still inheriting the "inertness" of its DOM parent?

ssd · Accepted Answer · 2026-04-28 05:35:56Z

1

Move the popover element so it is not a child of the element you are making inert. The best practice is to place your popovers/dialogs as direct children of the <body> or wrap your main content in a separate container from your UI overlays.

<body>
  <main id="app-content">
    </main>

  <div id="tour-step-1" popover>
    <button>Next</button>
  </div>
</body>

answered Apr 28 at 5:35

Collectives™ on Stack Overflow

Why does the inert attribute disable a popover even when it is promoted to the Top Layer?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related