Skip to content
html.sh

The popover Attribute

The popover Attribute

Section titled “The popover Attribute”
Global Attribute NEW

The popover attribute transforms any element into a popover that can be toggled open and closed. Popovers are displayed above other page content, have automatic light dismiss behavior, and are managed by the browser’s top layer, making them perfect for tooltips, menus, dialogs, and disclosure widgets.

Syntax

Section titled “Syntax”
<element popover>Content</element>
<element popover="auto">Content</element>
<element popover="manual">Content</element>

Values

Section titled “Values”
ValueDescriptionDismiss Behavior
auto (default)Auto-dismiss popoverCloses when clicking outside, pressing Esc, or opening another auto popover
manualManual popoverOnly closes via explicit action (button click or JavaScript)

Examples

Section titled “Examples”

Basic Popover

Section titled “Basic Popover”
Result

Auto vs Manual Popovers

Section titled “Auto vs Manual Popovers”
Result

Tooltip Pattern

Section titled “Tooltip Pattern”
Result
Section titled “Menu Popover”
Result

Notification Popover

Section titled “Notification Popover”
Result

How It Works

Section titled “How It Works”

The Top Layer

Section titled “The Top Layer”

Popovers are displayed in the browser’s top layer:

  • Always rendered on top of other content
  • Not affected by parent z-index or overflow
  • Automatically manages stacking order
  • Has a ::backdrop pseudo-element
[popover]::backdrop {
  background: rgba(0, 0, 0, 0.3);
}

Light Dismiss Behavior

Section titled “Light Dismiss Behavior”

Auto popovers close when:

  • Clicking outside the popover
  • Pressing the Escape key
  • Opening another auto popover
  • Clicking the trigger button again

Manual popovers only close via:

  • Explicit button with popovertargetaction="hide"
  • JavaScript: element.hidePopover()

JavaScript API

Section titled “JavaScript API”
const popover = document.getElementById('my-popover');


// Show popover
popover.showPopover();


// Hide popover
popover.hidePopover();


// Toggle popover
popover.togglePopover();


// Check if showing
if (popover.matches(':popover-open')) {
  console.log('Popover is open');
}


// Events
popover.addEventListener('beforetoggle', (event) => {
  console.log('State:', event.newState); // "open" or "closed"
});


popover.addEventListener('toggle', (event) => {
  console.log('Popover toggled');
});

CSS Pseudo-Classes and Pseudo-Elements

Section titled “CSS Pseudo-Classes and Pseudo-Elements”
/* Style open popover */
[popover]:popover-open {
  animation: slideIn 0.3s;
}


/* Style the backdrop */
[popover]::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}


/* Animation */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Best Practices

Section titled “Best Practices”

1. Choose the Right Type

Section titled “1. Choose the Right Type”
<!-- Auto: For menus, tooltips, dropdowns -->
<div popover="auto">Menu items...</div>


<!-- Manual: For notifications that shouldn't auto-dismiss -->
<div popover="manual">Important message...</div>

2. Provide Close Buttons for Manual Popovers

Section titled “2. Provide Close Buttons for Manual Popovers”
<div id="manual-popup" popover="manual">
  <button popovertarget="manual-popup" popovertargetaction="hide">
    Close
  </button>
  Content...
</div>

3. Use Semantic HTML Inside

Section titled “3. Use Semantic HTML Inside”
<div id="menu" popover role="menu">
  <button role="menuitem">Option 1</button>
  <button role="menuitem">Option 2</button>
</div>

4. Add Animations

Section titled “4. Add Animations”
[popover] {
  transition: opacity 0.3s, transform 0.3s;
}


[popover]:not(:popover-open) {
  opacity: 0;
  transform: scale(0.95);
}

Accessibility

Section titled “Accessibility”

Keyboard Support

Section titled “Keyboard Support”

Popovers have built-in keyboard support:

  • Escape: Closes auto popovers
  • Tab: Focus moves within popover
  • Focus trap: Browser manages focus

Screen Readers

Section titled “Screen Readers”
<!-- Add ARIA labels -->
<button popovertarget="menu" aria-label="Open menu">
  Options
</button>


<div id="menu" popover role="menu" aria-label="Options menu">
  <!-- Menu items -->
</div>

Browser Support

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

Specifications

Section titled “Specifications”