Here is the rewritten article:

Introduction to the Popover API

There is a new popover API. With it, you can easily create a popover without using a library and without writing a single line of JavaScript. This has been supported in all major browsers since this year, and I’ll show you how easy it is to use.

What is the Popover API?

The popover API is a new standard designed to make it easy for web developers to display popovers over other elements on a website. You don’t have to handle the different states yourself. The actions for opening and closing work super easily, and accessibility has been considered from the start.

Creating a Popover

Basic Implementation

Let’s take a look at how to create a popover. So, how does a popover work?

<!-- Basic Implementation -->
<button popover-target="myPopover">Open Popover</button>
<div id="myPopover" popover="">
  <p>This is a basic popover example.</p>
</div>

Adding a Close Button

What also works is creating a button within the popover, giving it the correct target, and explicitly defining a hide action. Add some CSS to make it look decent, and we have a popover that can also be closed by clicking an X button.

<!-- Adding a Close Button -->
<button popover-target="closeablePopover">Open Popover</button>
<div id="closeablePopover" popover="">
  <p>This popover has a close button.</p>
  <button popover-target="closeablePopover" popover-hide="">X</button>
</div>

Popover Modes

By default, a popover is in auto Popover Mode, which means:

• It will close other open popovers when opened.
• Light dismiss is active.

If you set a popover to manual mode, it won’t close other popovers, there is no light dismiss, and we need an action to toggle or close the popover.

Here, we already have the hide action on the Backdrop X.

Styling a Popover

Using the Backdrop Element

What is particularly practical is the ID element backdrop that I can use. This gives us an element that, when the popover is open, overlays the rest of the website.

We can easily define a background color with some transparency. This makes it much easier to put the focus on the popover.

Popover vs. Modal

However, it’s important to note that a popover is not a modal. A modal doesn’t make the rest of the website inert. You can still, for example, click buttons while the modal is open. If you don’t want that, I recommend using dialog.showModal() instead of a popover. You’ll need to write a bit of JavaScript, but you’ll get a true modal that the user must interact with.

Enhancing Popover Styling

Using the Dialogue Element

At the moment, for many purposes, the popover is still super suitable. I’ll show you how to make it look a bit nicer.

<!-- Enhancing Popover Styling -->
<button popover-target="styledPopover">Styled Popover</button>
<dialog id="styledPopover" popover="">
  <h3>Styled Popover</h3>
  <p>This popover looks better with additional CSS.</p>
  <button class="primary">Primary Action</button>
  <button popover-target="styledPopover" popover-hide="">X</button>
</dialog>

Using JavaScript with Popover

One last note: we can, of course, use JavaScript if you want. For example, with the command showPopover, a popover can be opened very easily.

Conclusion

And that’s it for this topic! Feel free to write in the comments if you found the topic helpful. I would really appreciate a like or a follow, as it would help me a lot in writing such content.

FAQs

• What is the popover API?
  • The popover API is a new standard designed to make it easy for web developers to display popovers over other elements on a website.
• Can I use JavaScript with the popover API?
  • Yes, you can use JavaScript with the popover API, but it’s not necessary.