Popover API 101
Browsers have been getting some pretty important features at a rapid pace lately. Features that might take several JavaScript (or CSS) libraries to implement are now available in browsers out of the box.
First Dialogs and now Popovers! The Popover API that can be used to create Popovers is now widely available in most modern browsers.
In this article, I will cover the basics of the Popover API and how to use it to create a Popover in the no-fluff way possible.
- What is a Popover?
- A Basic Popover
- A word on “Light dismiss-ability” of Popovers
- Styling the Popover
- Animating the Popover
- Checking the support for Popover API
- Conclusion
What is a Popover?
Popovers are small overlay boxes that appear when a user clicks or hovers over a specific element on a webpage or application. They display additional content or information without redirecting the user to a new page. Popovers can contain text, images, links, and other interactive elements.
Contrary to Dialogs, Popovers follows the non-modal approach. Meaning, when they appear, the user can still interact with the page behind the popover.
Popovers can be used for a wide variety of purposes, such as:
- Tooltips: Popovers often provide brief, helpful information about a specific element, similar to tooltips but typically more complex and interactive.
- Forms: They can contain forms for user input, such as login forms, search bars, or feedback forms.
- Notifications: Popovers can be used to show notifications, toasts, alerts, or updates in a more noticeable way than a simple text message.
- Menus: Dropdown menus or context menus that appear when an element is clicked can be considered popovers.
- Additional Details: They are useful for displaying additional details or options related to a specific item without cluttering the main interface.
As I said, it would take a JavaScript library like popper.js or your own custom JavaScript to implement a popover until the Popover API is available in browsers.
Fundamentally, the Popover API is a concoction of HTML attributes, CSS properties, and JavaScript APIs that allow developers to create popovers in a flexible and customizable way.
A Basic Popover
To create any HTML element as a popover, all we need is to add a new attribute to the element called popover. And that’s it! The element now acts as a popover.
<div id="demopopover" popover>
A popover element
</div>
Once the element is a popover, it will be hidden by default.
The popover can essentially be shown,
- By clicking on another element
- Via JavaScript API
Showing the Popover by clicking on another element
To show the popover by clicking a button, we can use the popovertarget attribute on the button and give it the id of the popover element.
<button popovertarget="demopopover">
Toggle Popover Button
</button>
<div id="demopopover" popover>
A popover element
</div>
Here’s what that looks like in action.
See the Pen Popover API by Amit Merchant (@amit_merchant) on CodePen.
By default, clicking on the button will just toggle the popover. But if you want, you can also separate the action of showing the popover from the action of hiding the popover using the popovertargetaction attribute and assigning it the value of show or hide respectively.
<button popovertarget="demopopover" popovertargetaction="show">
Show Popover Button
</button>
<button popovertarget="demopopover" popovertargetaction="hide">
Hide Popover Button
</button>
<div id="demopopover" popover>
A popover element
</div>
Here’s what that looks like in action.
See the Pen A basic popover by Amit Merchant (@amit_merchant) on CodePen.
Showing the Popover via JavaScript API
To show the popover using JavaScript, first, we need to grab the popover element via, let’s say, the id of the element and then call the togglePopover() method on it.
const popover = document.getElementById('demopopover');
popover.togglePopover();
In the following example, we’re toggling the popover when on the press of the p key.
See the Pen A basic popover by Amit Merchant (@amit_merchant) on CodePen.
As you can tell, the togglePopover() method lets you show or hide the popover by repeatedly pressing the p key.
There are methods that can be used to show or hide the popover respectively.
showPopover()- Shows the popoverhidePopover()- Hides the popover
You can use these methods according to your needs.
A word on “Light dismiss-ability” of Popovers
When the popover attribute is used without any value, the default value is auto.
This means that the popover will vanish when…
- The user clicks outside the popover
- Presses the esc key.
If you want to disable this behavior, you can use the popover attribute with the value of manual.
<div id="demopopover" popover="manual">
A popover element
</div>
Now, the popover won’t be dismissed when the user clicks outside the popover or presses the esc key. It can only be dismissed by clicking on the popover or calling the hidePopover() method.
Styling the Popover
The default styling of the popover is pretty minimal. But you can style it as you want.
To style the popover, we can use the [popover] selector.
[popover] {
background-color: lightblue;
color: #514f4f;
padding: 3em;
border-radius: 10px;
border: none;
font-family: sans-serif;
font-weight: bold;
font-size: 1.2em;
box-shadow: 1px 1px 5px 0px #0000005e;
}
The result looks like this.
See the Pen A basic popover by Amit Merchant (@amit_merchant) on CodePen.
We can also style the backdrop of the popover using the ::backdrop selector. For instance, we can blur the background of the popover.
::backdrop {
backdrop-filter: blur(3px);
}
The result looks like this.
See the Pen Styling the popover by Amit Merchant (@amit_merchant) on CodePen.
Animating the Popover
The default animation of the popover is a simple fade-in and fade-out. But we can customize this behavior using the combination of the :popover-open pseudo-class and @starting-style at-rule like so.
[popover]:popover-open {
opacity: 1;
transform: rotate(0deg);
}
[popover] {
background-color: lightblue;
color: #514f4f;
padding: 3em;
border-radius: 10px;
border: none;
font-family: sans-serif;
font-weight: bold;
font-size: 1.2em;
box-shadow: 1px 1px 5px 0px #0000005e;
/* Final state of the exit animation */
opacity: 0;
transform: rotate(0deg);
transition: opacity 0.5s, transform 0.5s, overlay 0.5s allow-discrete,
display 0.5s allow-discrete;
}
/* Needs to be after the previous [popover]:popover-open rule
to take effect, as the specificity is the same */
@starting-style {
[popover]:popover-open {
opacity: 0;
transform: rotate(90deg);
}
}
::backdrop {
background-color: rgb(0 0 0 / 0%);
transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete,
background-color 0.7s;
}
[popover]:popover-open::backdrop {
background-color: rgb(0 0 0 / 25%);
}
/* The nesting selector (&) cannot represent pseudo-elements
so this starting-style rule cannot be nested */
@starting-style {
[popover]:popover-open::backdrop {
background-color: rgb(0 0 0 / 0%);
}
}
The end result looks like this.
See the Pen Popover backdrop by Amit Merchant (@amit_merchant) on CodePen.
As you can tell, the popver rotates 90 degrees and settles to its final state after a delay of 0.5 seconds. This is achieved using the :popover-open pseudo-class. The @starting-style at-rule is where animation starts and the transition property is used to animate the opacity and transform properties.
Checking the support for Popover API
Although the Popover API is available in most modern browsers, it might be possible that the browser you’re using doesn’t support it.
To check if the Popover API is supported, we can check whether the popover property is supported on the HTMLElement interface or not.
if ('popover' in HTMLElement.prototype) {
console.log('Popover API is supported');
}
Based on that, we can decide whether to use the Popover API or not.
Conclusion
The Popover API enhances user interactions by allowing developers to create context-aware popovers that provide additional information or actions without an overhead of external libraries or with a minimal amount of code.
And since the Popover API is available in most modern browsers, I don’t see any reason why we shouldn’t use it over any other JavaScript library.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
