HTML popovertargetaction Attribute

HTML popovertargetaction Attribute

The HTML popovertargetaction attribute specifies what a popover control button does to the popover identified by its popovertarget attribute. A button can toggle, show, or hide its targeted popover without requiring JavaScript.

Elements That Use the popovertargetaction Attribute

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

popovertargetaction Values

The popovertargetaction attribute is an enumerated attribute with three supported values: toggle, show, and hide.

If popovertargetaction is omitted or contains an invalid value, the action defaults to toggle.

How popovertargetaction Works

The popovertargetaction attribute works together with popovertarget. The popovertarget attribute identifies the popover element, while popovertargetaction determines what happens to that popover when the control is activated.

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

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

In this example, popovertarget="information" identifies the popover and popovertargetaction="show" tells the browser to show it.

toggle Action

The toggle value switches the targeted popover between its shown and hidden states. It is also the default action when popovertargetaction is omitted.

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

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

Because toggle is the default, the same behavior can be created by using popovertarget without specifying popovertargetaction.

show and hide Actions

The show and hide values are useful when separate controls should open and close the same popover.

<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. The button inside the popover uses hide to close it.

Common Mistakes

Do not use popovertargetaction without a valid popovertarget. The browser needs a targeted popover before it can perform the requested action.

Do not use values such as open or close. The supported values are toggle, show, and hide.

Do not assume that show toggles a popover. If the targeted popover is already shown, the show action does nothing. Similarly, hide does nothing when the popover is already hidden.

Do not add JavaScript merely to show or hide a popover when the declarative popovertarget and popovertargetaction attributes provide the behavior you need.

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 popovertargetaction 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 popovertargetaction Attribute

Click Show Information to display the popover. The button inside the popover uses popovertargetaction="hide" to close it.

Summary

The HTML popovertargetaction attribute specifies what a popover control does to the element identified by popovertarget. The toggle value switches between shown and hidden states, show displays a hidden popover, and hide hides a shown popover. If the attribute is omitted or invalid, the default action is toggle.