The HTML popovertarget attribute
Quick answer
The HTML popovertarget attribute turns the button into a control that toggles the popover with the given id. It is used on the <button> and <input type="button"> elements.
Overview
The popovertarget attribute turns the button into a control that toggles the popover with the given id. It applies to the <button> and <input type="button"> elements.
Part of the Popover API — no JavaScript needed. The button automatically shows, hides or toggles the target popover.
Syntax
<button popovertarget="menu">Menu</button>
<div id="menu" popover> … </div>Values
| Value |
|---|
The id of an element that has the popover attribute. |
Example
<button popovertarget="pop">Open</button> <div id="pop" popover style="padding:12px;border:1px solid #cbd5e1;border-radius:8px;">Hello!</div>Best practices
- Always set an explicit type on a <button> — the default inside a form is
submit. - Use the
form*override attributes only when one button genuinely needs different submission behavior. - Give every button clear, descriptive text for screen readers.
- Prefer real <button> elements over clickable <div>s for keyboard and accessibility support.
Frequently asked questions
What does the popovertarget attribute do?
Makes a button toggle a popover.
Why does my button submit the form unexpectedly?
Can one button submit to a different URL than the form?
Yes. Put
formaction (and optionally formmethod) on that submit button to override the form.