Skip to content
html.sh

The popovertargetaction Attribute

The popovertargetaction Attribute

Section titled “The popovertargetaction Attribute”
Global Attribute NEW

The popovertargetaction attribute specifies what action a button should perform on a popover element: show it, hide it, or toggle it. It works in combination with the popovertarget attribute to provide fine-grained control over popover behavior.

Syntax

Section titled “Syntax”
<button popovertarget="popover-id" popovertargetaction="action">Button</button>

Values

Section titled “Values”
ValueDescriptionBehavior
toggle (default)Toggle the popoverOpens if closed, closes if open
showShow the popoverOnly opens, won’t close if already open
hideHide the popoverOnly closes, won’t open if already closed

Examples

Section titled “Examples”

All Three Actions

Section titled “All Three Actions”
Result

Separate Open and Close Buttons

Section titled “Separate Open and Close Buttons”
Result

Multi-Panel Interface

Section titled “Multi-Panel Interface”
Result

Wizard/Stepper Pattern

Section titled “Wizard/Stepper Pattern”
Result

How Each Action Works

Section titled “How Each Action Works”

toggle (Default)

Section titled “toggle (Default)”

Switches between open and closed states:

<button popovertarget="menu">Menu</button>
<!-- Same as -->
<button popovertarget="menu" popovertargetaction="toggle">Menu</button>


<div id="menu" popover>Content</div>

Behavior:

  • If popover is closed → Opens it
  • If popover is open → Closes it

show

Section titled “show”

Only opens the popover:

<button popovertarget="menu" popovertargetaction="show">
  Open Menu
</button>


<div id="menu" popover>Content</div>

Behavior:

  • If popover is closed → Opens it
  • If popover is already open → Does nothing

Use cases:

  • Open buttons in multi-step workflows
  • Explicit “show” actions
  • When you have separate open/close buttons

hide

Section titled “hide”

Only closes the popover:

<button popovertarget="menu" popovertargetaction="hide">
  Close Menu
</button>


<div id="menu" popover>Content</div>

Behavior:

  • If popover is open → Closes it
  • If popover is already closed → Does nothing

Use cases:

  • Close buttons inside popovers
  • Explicit “dismiss” actions
  • Cancel buttons in dialogs

Best Practices

Section titled “Best Practices”

1. Use Appropriate Actions

Section titled “1. Use Appropriate Actions”
<!-- Good: Toggle for simple menus -->
<button popovertarget="menu" popovertargetaction="toggle">
  Menu
</button>


<!-- Good: Separate show/hide for clarity -->
<button popovertarget="dialog" popovertargetaction="show">
  Open Dialog
</button>


<!-- Inside the dialog -->
<button popovertarget="dialog" popovertargetaction="hide">
  Close
</button>

2. Match Button Text to Action

Section titled “2. Match Button Text to Action”
<!-- Button text matches action -->
<button popovertarget="menu" popovertargetaction="show">
  Open Menu
</button>


<button popovertarget="menu" popovertargetaction="hide">
  Close Menu
</button>


<!-- Generic text with toggle -->
<button popovertarget="menu" popovertargetaction="toggle">
  Menu
</button>

3. Provide Close Buttons for Manual Popovers

Section titled “3. Provide Close Buttons for Manual Popovers”
<div popover="manual">
  <!-- Manual popovers need explicit close -->
  <button popovertarget="this-popover" popovertargetaction="hide">
    ✕
  </button>
  Content...
</div>

4. Use show/hide for Sequential Workflows

Section titled “4. Use show/hide for Sequential Workflows”
<!-- Step 1 -->
<button
  popovertarget="step1"
  popovertargetaction="hide"
  popovertarget-next="step2"
  onclick="document.getElementById('step2').showPopover()">
  Next
</button>


<!-- Step 2 -->
<button
  popovertarget="step2"
  popovertargetaction="hide"
  onclick="document.getElementById('step1').showPopover()">
  Previous
</button>

JavaScript API

Section titled “JavaScript API”

Access the action value via JavaScript:

const button = document.getElementById('myButton');


// Set action
button.setAttribute('popovertargetaction', 'show');


// Get action
const action = button.getAttribute('popovertargetaction');
console.log(action); // "show", "hide", or "toggle"


// Use popoverTargetAction property (Camel case)
button.popoverTargetAction = 'hide';
console.log(button.popoverTargetAction); // "hide"

Combining with Events

Section titled “Combining with Events”
const popover = document.getElementById('my-popover');


popover.addEventListener('toggle', (event) => {
  if (event.newState === 'open') {
    console.log('Popover opened');
  } else {
    console.log('Popover closed');
  }
});


// Change button text based on state
const toggleBtn = document.getElementById('toggle-btn');
popover.addEventListener('toggle', (event) => {
  if (event.newState === 'open') {
    toggleBtn.textContent = 'Close Menu';
  } else {
    toggleBtn.textContent = 'Open Menu';
  }
});

Common Patterns

Section titled “Common Patterns”

Open/Close Pair

Section titled “Open/Close Pair”
<button popovertarget="sidebar" popovertargetaction="show">
  Open Sidebar
</button>


<!-- Inside sidebar -->
<div id="sidebar" popover="manual">
  <button popovertarget="sidebar" popovertargetaction="hide">
    Close
  </button>
  Content...
</div>

Toggle Button with Icon

Section titled “Toggle Button with Icon”
<button id="menu-toggle" popovertarget="menu" popovertargetaction="toggle">
  <span id="icon">☰</span>
  <span id="text">Menu</span>
</button>


<script>
  document.getElementById('menu').addEventListener('toggle', (e) => {
    const icon = document.getElementById('icon');
    const text = document.getElementById('text');
    if (e.newState === 'open') {
      icon.textContent = '✕';
      text.textContent = 'Close';
    } else {
      icon.textContent = '☰';
      text.textContent = 'Menu';
    }
  });
</script>

Browser Support

Section titled “Browser Support”
BrowserSupport
Chrome114+
Edge114+
Safari17+
Firefox125+ (behind flag)
Section titled “Related Attributes”

Specifications

Section titled “Specifications”