Browser Begins Support for Popover API: A Quick Guide
Tags: webdev, javascript, html, css
Published: 2024-05-17 12:08:18

Popovers are universal UI components used to display additional content or interactive elements in a temporary floating overlay layer. In the past, extra work was needed to implement them.

Now, almost all major browsers support the Popover API. It provides standardized methods for creating and managing these elements without the need for additional libraries.

# `popover` Global Attribute

Adding the `popover` attribute to an HTMLElement transforms the element into a popover. This popover element is initially hidden using `display: none` until activated as described below.

When activated, the popover will display above all other elements and will not be affected by the `position` or `overflow` styles of its parent elements. 

A popover attribute can have values `"auto"` (default) or `"manual"`. Popovers with the `auto` state can be "light dismissed" by selecting outside the popover area and generally allow only one popover to be displayed on-screen at a time. By contrast, `manual` popovers must always be explicitly hidden but allow for nested popovers in menus.

 ![](https://cdn-images-1.medium.com/max/1117/1*_RTiJMIcyfVsFjBExc7EVA.png)

# Activation Methods

There are two ways to create it:

### HTML Declaration

```html
<button popovertarget="mypopover" popovertargetaction="toggle">
Toggle the popover
</button>

<div id="mypopover" popover>
Popover content
</div>
```

Here, `popovertarget` is new, turning `<button>` or `<input>` elements into popover control buttons with the controlled popover element’s ID as its value.

Similarly, `popovertargetaction` is also new, accepting `hide`, `show`, and `toggle`. It can be omitted with `toggle` as the default. This specifies the action to be performed by the control `<button>` on the popover element.

### JavaScript API

```javascript
// Toggle the display state of the popover element.
HTMLElement.togglePopover();

// Display it by adding the popover element to the top layer.
HTMLElement.showPopover();

// Hide it by removing the popover element from the top layer and styling it with display: none.
HTMLElement.hidePopover();
```

Calling these functions on elements with the `popover` attribute quickly achieves the desired effect.

# Events

When the state of a popover element toggles between shown and hidden, you might need to perform some actions. The browser provides us with the beforetoggle event and toggle event, which are structured as follows:

```typescript
interface ToggleEvent extends Event {
    readonly newState: string;
    readonly oldState: string;
}
```

Here, the values of newState and oldState are both `"open"` or `"closed"` . But the former represents the state the element is transitioning to, and the latter represents the state the element is transitioning from.

Let’s take a closer look:

### beforetoggle event

Fired just before a popover element’s state changes between showing and hidden, or vice versa.

```javascript
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});

popover.showPopover();
popover.hidePopover();
// `beforetoggle` only fires once
```

It is worth pointing out that `beforetoggle` events are coalesced, meaning that if multiple `beforetoggle` events are fired before the event loop has a chance to cycle, only a single event will be fired.

### toggle event

Fired just after a popover element’s state changes between showing and hidden, or vice versa. This event already existed to signal state changes on `details` elements.

```javascript
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover has been shown");
  } else {
    console.log("Popover has been hidden");
  }
});

popover.showPopover();
popover.hidePopover();
// `toggle` only fires once
```

Likewise, the `toggle` event is also coalesced.

# CSS Features

You might want to customize the style of the popovers, so the browser provides:

### ::backdrop

The `::backdrop` pseudo-element is a full-screen element placed directly behind popover elements, allowing effects to be added to the page content behind the popover(s) if desired (for example blurring it out).

 ![](https://cdn-images-1.medium.com/max/1117/1*eXljcqF95xbqZZxIWLhHuA.png)

### :popover-open

The `:popover-open` pseudo-class matches a popover element only when it is in the showing state — it can be used to style popover elements when they are showing.

### [popover]

We can also set default CSS styles for Popover as follows:

 ![](https://cdn-images-1.medium.com/max/1117/1*fpfsWsE18bAMRWkoc4v-DA.png)

# Conclusion

The Popover API is a long-awaited feature in HTML and Javascript, providing us with a native, flexible solution. Happy coding!

*If you find this helpful, [**please consider subscribing**](https://webdeveloper.beehiiv.com/) to my newsletter for more insights on web development. Thank you for reading!*