HTML popovertarget Attribute

The HTML popovertarget attribute connects a button to an element that has the popover attribute. Its value identifies the popover to control, allowing the button to show, hide, or toggle the popover without requiring JavaScript.

Elements That Use the popovertarget Attribute

The popovertarget attribute can be used with the <button> element and with an <input> element whose type is button.

Element	Description
`<button>`	Identifies the popover element controlled by the button.
`<input type="button">`	Identifies the popover element controlled by an input button.

popovertarget Value

The value of the popovertarget attribute must match the id of an element with a popover attribute in the same tree.

<button type="button" popovertarget="information">Show Information</button>

<div id="information" popover>
  <p>Popover content</p>
</div>

In this example, popovertarget="information" connects the button to the element with id="information".

How popovertarget Works

The popovertarget attribute creates a declarative relationship between a button and a popover. This allows the browser to control the popover without JavaScript.

The targeted element must have the popover attribute. Activating the button then performs an action on that popover.

<button type="button" popovertarget="help">Help</button>

<aside id="help" popover>
  <p>Helpful information appears here.</p>
</aside>

Default Toggle Action

When popovertarget is specified without popovertargetaction, the default action is toggle. Activating the button shows the popover when it is hidden and hides it when it is already shown.

<button type="button" popovertarget="details">Toggle Details</button>

<div id="details" popover>
  <p>Additional details appear here.</p>
</div>

Controlling the Popover Action

The related popovertargetaction attribute can change what the button does to the targeted popover. Its available values are toggle, show, and hide.

<button type="button" popovertarget="notice" popovertargetaction="show">Show Notice</button>

<div id="notice" popover>
  <p>This is the notice.</p>
  <button type="button" popovertarget="notice" popovertargetaction="hide">Close</button>
</div>

The first button shows the popover, while the button inside the popover hides it.

Accessibility

Using popovertarget creates a browser-managed relationship between the control and its popover. The browser can expose information about the relationship and the popover's expanded state to assistive technologies.

When possible, place the popover element immediately after its triggering control in the HTML. This helps keep the content in a logical reading and keyboard navigation order.

Common Mistakes

Do not include the # character before the target ID. Use popovertarget="menu", not popovertarget="#menu".

Make sure the value of popovertarget matches the target element's id. If the IDs do not match, the button cannot control the intended popover.

Do not forget to add the popover attribute to the targeted element. The popovertarget attribute is intended to target a popover element.

Do not use popovertarget on unrelated form controls. It applies to <button> elements and <input type="button"> controls.

Browser Support

Baseline: Newly available indicates that a feature is supported in the latest stable version of each of the core browsers. Most users can use these features reliably, but they may not work in older browser versions.

The popovertarget attribute is supported in the latest core browser versions on supported <button> and <input> controls, but it may not work in older browser versions.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the popovertarget Attribute

Click the button to open the targeted popover. Click the button again to close it. Because no popovertargetaction is specified, the button uses the default toggle action.

Play in Editor

Summary

The HTML popovertarget attribute connects a <button> or <input type="button"> control to an element with the popover attribute. Its value matches the popover element's id, and the default action toggles the popover between its hidden and shown states.