A useful interface does not need to be complicated. Start with native HTML, then add JavaScript only when you need it.
What You Need to Know
Nested popovers need a predictable relationship so opening an inner menu does not unexpectedly close everything. Test keyboard focus and dismissal step by step.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<button type="button" popovertarget="main-popover">Open options</button>
<div id="main-popover" popover="auto">
<p>Options</p>
<button type="button" popovertarget="more-popover">More details</button>
<div id="more-popover" popover="auto">Extra details inside options.</div>
</div>Let’s Read the Code
- popover: Popover lets supported browsers manage showing and hiding a small overlay.
- <button>: The button offers an action; its type or command determines what happens.
- type: Type changes what sort of control or resource the browser uses.
- popovertarget: Popovertarget connects a trigger button to a popover by ID.
What the example shows: A nested popover can be opened from within another popover; the relationships affect dismissal expectations.
What Happens in the Browser?
When this example includes JavaScript, it supplies behavior that ordinary HTML does not automatically provide. Always think about a fallback.
Start with native behavior. Details, dialog, and popover each solve a different interface problem. Choose the simplest control that actually matches what a visitor wants to do, then test focus and dismissal as well as appearance.
Your Turn
Open the inner popover, then press Escape and note what closes.
Common Beginner Mistakes
- Assuming new HTML syntax works in every browser without testing.
- Test Escape and click-away behavior instead of assuming nested overlays work like menus.
Key Takeaways
- Nested popovers need a predictable relationship so opening an inner menu does not unexpectedly close everything.
- popover: Popover lets supported browsers manage showing and hiding a small overlay.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.