Muhammad Usman

Posted on Jan 18

Popover API: Create Native Pop-Ups with HTML—No JavaScript Needed

#webdev #frontend #html #css

Introduction to the Popover API

There is the 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>

We simply create a button in HTML that is supposed to open the popover.
Give it the attribute popover-target and a corresponding ID by popover.
Then, we assign an HTML element that is supposed to be the popover this ID and use the attribute popover.

That's it! We can now click the button to open the popover, and if you click somewhere outside the popover, it will close again—a so-called light dismiss. This is enabled by default.
Additionally, this button currently has a toggle function because we haven't specified otherwise.

Adding a Close 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>

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.

Popover Modes

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

<!-- Popover Modes -->
<button popover-target="manualPopover">Manual Popover</button>
<div id="manualPopover" popover="manual">
  <p>This is a manual mode popover.</p>
  <button popover-target="manualPopover" popover-hide>Close</button>
</div>

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.

<!-- Styling a Popover with Backdrop -->
<style>
  [popover] {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    max-width: 300px;
  }

  [popover] h3 {
    margin: 0 0 8px;
  }

  [popover] p {
    margin: 0 0 16px;
  }

  [popover] button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #007bff;
  }

  [popover-target="closeablePopover"]:popover {
    position: relative;
  }
</style>

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.

<!-- Popover vs Modal -->
<dialog id="myModal">
  <p>This is a modal. Interaction with the rest of the site is disabled.</p>
  <button onclick="document.getElementById('myModal').close()">Close Modal</button>
</dialog>
<button onclick="document.getElementById('myModal').showModal()">Open Modal</button>

A popover doesn't make the rest of the website inert.
You can still, for example, click buttons while the popover 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>
<style>
  dialog[popover] {
    font-family: Arial, sans-serif;
    border: none;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    max-width: 400px;
  }

  dialog[popover] .primary {
    background-color: #007bff;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  dialog[popover] .primary:hover {
    background-color: #0056b3;
  }
</style>

The popover attribute itself doesn't add semantics to an element, so we can use an HTML dialog element for it.

Adding More Content

Now, I add a bit more content to the popover.

I also add a button for another action.
This button gets the class primary.
The button above also gets this class, and the X gets its own class.

Applying CSS

Now, a few lines of CSS:

We define another font family.
Remove the border of the popover, give it some padding, rounded corners, and a maximum width.
The icon button is displayed in grayscale.
Then, a small adjustment for the heading, the paragraph, and also the button in the popover.
Finally, we create a class for the primary buttons with a blue background, padding, rounded corners, etc., and then the hover state.

And that's it! It already looks really good. A few lines of HTML and CSS—not a single line of JavaScript—and we have a nice popover.

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.

Don't forget to follow me on following
LinkedIn | Medium | Bluesky

DEV Community