DEV Community: Ajay D

Native HTML Series Part 3: Popover API

Ajay D — Sat, 28 Feb 2026 13:15:45 +0000

Native HTML Series Part 3: Tooltips and Menus with the Popover API

Welcome to Part 3 of our series on replacing third-party UI libraries with native HTML. We’ve already covered zero-JS accordions and native modals. Today, we are looking at the newest tool in the browser's arsenal: the Popover API.

Think about how often you build tooltips, user profile dropdowns, or custom toast notifications. Historically, getting these to float above your content without z-index bugs—while also remembering to close them when the user clicks somewhere else—required a dedicated JavaScript library or writing complex event listeners.

The new popover attribute solves all of this natively.

The Bare Bones

Unlike <dialog>, which is a specific HTML tag, popover is a global attribute. You can attach it to a <div>, an <article>, or any other element to instantly turn it into a floating popup.

Here is the entire HTML required to create a working popover menu, with absolutely zero JavaScript:

<button popovertarget="user-menu">Open User Menu</button>

<div id="user-menu" popover>
  <ul>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Sign Out</a></li>
  </ul>
</div>

That's it. By linking the button's popovertarget to the id of the div, the browser handles the click events completely behind the scenes.

The Magic: Built-In Light Dismiss

In Part 2, we had to write a JavaScript function to close our modal when the user clicked the background.

With the Popover API, this behavior (known as "light dismiss") is built-in by default. When a popover is open, doing any of the following will automatically close it:

Clicking anywhere outside the popover.
Pressing the Escape key.
Opening another popover.

Furthermore, just like the <dialog> element, popovers are promoted to the browser's "Top Layer," guaranteeing they will always sit on top of your other content, regardless of the parent container's overflow: hidden or z-index rules.

The CSS Glow-Up

By default, an open popover is just centered in the middle of the screen. We can use CSS to style it as a sleek, floating menu and add transitions using the :popover-open pseudo-class.

/* Style the popover box */
[popover] {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  background: white;

  /* Basic positioning - reset defaults */
  margin: auto; 
  max-width: 250px;
}

/* Remove default list styling for our menu */
[popover] ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

[popover] li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f5f9;
}

[popover] li:last-child {
  border-bottom: none;
}

Note: For true relative positioning (e.g., anchoring the popover exactly below the button), you would use the new CSS Anchor Positioning API, which pairs perfectly with popovers but is a topic for a future post!

Why This Matters

The Popover API is a massive win for developer experience. It standardizes one of the most common UI patterns on the web. It means less JavaScript sent to the client, fewer accessibility bugs, and a much cleaner DOM. If you are writing end-to-end tests with tools like Playwright, testing these interactions becomes a breeze because the browser's native state is completely predictable.

Interactive Demo:
(Click the button below to see the popover in action. Notice how clicking anywhere else on the screen instantly closes it—no JS required!)

Native HTML Series Part 2: Element

Ajay D — Thu, 26 Feb 2026 06:59:11 +0000

Welcome to Part 2 of our series on replacing heavy JavaScript UI components with native HTML. In [Part 1] (link to previous post), we built a zero-JS accordion. Today, we are tackling a notorious front-end headache: the modal.

Building a custom modal used to mean fighting with CSS z-index, manually trapping the user's keyboard focus so they couldn't tab behind the modal, and writing script after script to handle closing it when they hit the Escape key.

Now, we have the native <dialog> element.

The Bare Bones

The <dialog> element represents a semantic popup window. While you do use a tiny bit of JavaScript to open it, the browser handles the complex accessibility and stacking context for you.

Here is the markup:

<button id="openBtn">Open Modal</button>

<dialog id="myModal">
  <h2>Native Modal Magic</h2>
  <p>Notice how you can't click the background? The browser handles the focus trap automatically.</p>

  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

To open this, we just need one tiny JavaScript event listener:

const modal = document.getElementById('myModal');
const openBtn = document.getElementById('openBtn');

openBtn.addEventListener('click', () => {
  modal.showModal(); // Opens as a modal (blocks the rest of the page)
});

The Magic: `showModal()` vs. `show()`

The real power of the <dialog> element lies in the .showModal() method. When you use this method (instead of just .show()), the browser does three incredible things:

The Top Layer: It promotes the dialog to a special browser "top layer" that exists outside the normal HTML document flow. You will never have a z-index conflict again.
Focus Trapping: It automatically prevents the user from tabbing to elements behind the modal.
The Escape Key: It wires up the Esc key to close the modal natively. No event listeners required.

The CSS Glow-Up: The `::backdrop`

When opened with .showModal(), the browser inserts a pseudo-element behind the dialog called ::backdrop. This lets us easily dim or blur the rest of the page.

/* Style the modal box itself */
dialog {
  padding: 2rem;
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Style the background overlay */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px); /* Adds a nice frosted glass effect */
}

The Zero-JS Close Button

Notice the <form method="dialog"> in the HTML snippet above? This is a brilliant feature. If a button inside a form with method="dialog" is clicked, the browser automatically closes the dialog. It completely eliminates the need to write an addEventListener just to wire up your close buttons.

The Missing Piece: Clicking Outside to Close

There is one UX expectation the <dialog> element doesn't handle automatically: clicking the dim backdrop to close the modal (often called a "light dismiss").

Fortunately, because the ::backdrop is technically part of the <dialog> element itself, we can solve this with a very clever, three-line JavaScript trick:

// Close the modal when clicking outside of it
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close();
  }
});

When you click the backdrop, the event.target is the dialog itself. If you click the white box of the modal, the target is the child element. This snippet perfectly handles the "click outside" expectation.

Why This Matters

Relying on native elements doesn't just reduce your bundle size; it drastically simplifies your codebase. As an added bonus, it makes end-to-end testing incredibly straightforward. If you are writing UI tests with tools like Playwright, you no longer have to wait for custom JS animations or write complex assertions for custom ARIA states—the DOM provides the absolute source of truth.

Interactive Demo:
(Interact with the native dialog below! Notice how you can use the Esc key, the close button, or click the background to dismiss it.)

Native HTML Series Part 1: Building Accordions

Ajay D — Tue, 24 Feb 2026 12:05:13 +0000

Building Accordions with `<details>` and `<summary>`

Welcome to the first post in a series where we explore native HTML features that can replace heavy JavaScript libraries. As front-end developers, we often reach for third-party packages to build common UI components. But modern browsers have evolved, and many of these interactive elements are now built right into the DOM.

Today, we're starting simple: the accordion.

Instead of writing custom state management and manually toggling ARIA attributes, we can use the native <details> and <summary> tags to build an accessible, functional accordion with zero JavaScript.

The Bare Bones

At its core, the <details> element represents a disclosure widget from which the user can retrieve additional information. The <summary> element acts as the clickable heading for that widget.

Here is the absolute minimum HTML required:

<details>
  <summary>Click to expand</summary>
  <p>Here is the hidden content! The browser handles the toggle state and accessibility announcements automatically.</p>
</details>

By default, the browser renders a small triangle next to the summary text. Clicking the summary toggles the open attribute on the <details> tag, showing or hiding the content inside.

The CSS Glow-Up

The default browser styling is functional but rarely fits a modern design system. Fortunately, customizing it is straightforward.

First, we usually want to remove the default triangle marker so we can add our own custom icons (like a plus/minus or a custom chevron).

/* Remove the default triangle and layout the bar */
summary {
  list-style: none; /* Works in most modern browsers */
  cursor: pointer;
  padding: 1rem;
  background-color: #f4f4f5;
  border-radius: 8px;
  font-weight: bold;

  /* NEW: Flexbox aligns the text and our new arrow */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Specifically for Safari */
summary::-webkit-details-marker {
  display: none;
}

/* NEW: Create the custom arrow */
summary::after {
  content: "›"; /* A simple chevron character */
  font-size: 1.5rem;
  line-height: 1;
  /* Add a smooth animation for when it rotates */
  transition: transform 0.3s ease; 
}
/* Style the content box */
details {
  margin-bottom: 1rem;
}

details p {
  padding: 1rem;
  margin: 0;
  border: 2px solid #f4f4f5;
}

Because the browser adds an open attribute to the <details> tag when it's expanded, we can use CSS attribute selectors to style the open state without touching JavaScript.

/* Change the background color when open */
details[open] summary {
  background-color: #e4e4e7;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

The Modern Superpower: The `name` Attribute

Historically, if you wanted an "exclusive" accordion—where opening one section automatically closes the others—you had to write JavaScript to listen for click events and manage the states.

Recently, browsers introduced support for the name attribute on the <details> element. By giving multiple <details> tags the exact same name, you group them together. The browser will natively ensure that only one element in that group is open at a time.

<details name="faq-accordion">
  <summary>What is HTML5?</summary>
  <p>The latest evolution of the standard that defines HTML.</p>
</details>

<details name="faq-accordion">
  <summary>Do I need JavaScript for this?</summary>
  <p>Not anymore! The name attribute handles the exclusive toggling natively.</p>
</details>

Why This Matters

Interactive Demo:
(Below is a live CodePen demonstrating the exclusive accordion with custom CSS. Feel free to interact with it or tweak the code!)

DEV Community: Ajay D

Native HTML Series Part 3: Popover API

Native HTML Series Part 3: Tooltips and Menus with the Popover API

The Bare Bones

The Magic: Built-In Light Dismiss

The CSS Glow-Up

Why This Matters

Native HTML Series Part 2: Element

The Bare Bones

The Magic: showModal() vs. show()

The CSS Glow-Up: The ::backdrop

The Zero-JS Close Button

The Missing Piece: Clicking Outside to Close

Why This Matters

Native HTML Series Part 1: Building Accordions

Building Accordions with <details> and <summary>

The Bare Bones

The CSS Glow-Up

The Modern Superpower: The name Attribute

Why This Matters

The Magic: `showModal()` vs. `show()`

The CSS Glow-Up: The `::backdrop`

Building Accordions with `<details>` and `<summary>`

The Modern Superpower: The `name` Attribute