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
Popovertargetaction chooses whether a button shows, hides, or toggles a popover. This is a declarative command: the button points to the popover's ID.
In this example: add separate open and close actions.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<button type="button" popovertarget="tip" popovertargetaction="show">Show tip</button>
<button type="button" popovertarget="tip" popovertargetaction="hide">Hide tip</button>
<div popover id="tip">Use a label for each form field.</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: Popovertargetaction can show, hide, or toggle a target popover depending on its value.
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
Change show to toggle and compare the trigger behavior.
Common Beginner Mistakes
- Assuming new HTML syntax works in every browser without testing.
- A popover does not necessarily behave like a modal dialog; avoid putting critical decisions inside a casual tip.
Key Takeaways
- Popovertargetaction chooses whether a button shows, hides, or toggles a popover.
- 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.