New project announcement
I shipped skillcraft.ai - a tool that helps you find the best learning resources tailored to your goals. All you need to do is tell it what you want to learn, and I’ll find the right resources to get you there.
Up to date
Published
2 min read

Trevor I. Lasn

Building tools for developers. Currently building skillcraft.ai and blamesteve.lol

Native Popover Element with HTML

Create overlays and dropdowns easily with the native HTML popover API

Building overlay UI elements like tooltips and dropdowns has always required complex JavaScript libraries. The new HTML Popover API changes this with native browser support for floating elements.

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

The Popover API introduces a new popover attribute that transforms any HTML element into a floating overlay.

The browser handles all the complex positioning, stacking order, and focus management automatically. This means we can create interactive UI elements without wrestling with z-index, click-outside handling, or managing focus states.

index.html
<button popovertarget="info">Toggle Popover</button>
<div id="info" popover>
<p>Popover content appears above other elements</p>
</div>

We can control popovers through two modes: auto and manual

Auto popovers dismiss themselves when clicking outside or when another auto popover opens, perfect for simple tooltips or dropdowns. Manual popovers give us more control over their behavior, useful for complex dialogs or multi-step flows.

The JavaScript API provides three methods to control popovers programmatically: showPopover(), hidePopover(), and togglePopover()

These methods return promises, allowing us to react to state changes and coordinate animations. The API also provides the :popover-open CSS pseudo-class for styling popovers based on their visibility state.

The Popover API represents a significant step forward in web platform capabilities. Instead of relying on complex positioning libraries or managing overlay states manually, we now have a native solution that handles these challenges elegantly. This means simpler code, better performance, and improved accessibility out of the box.

Browser support for the Popover API is growing. Chrome already supports it, and Safari has implemented the feature behind a flag. As adoption increases, we can expect this native solution to become the standard way of creating overlay UI elements on the web.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.


Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
3 min read

Preloading Responsive Images

How to properly preload responsive images to improve initial page load

Nov 28, 2024
Read article
Webdev
3 min read

CSS Supports Nesting Now

CSS nesting is finally supported in all major browsers. Write cleaner, organized stylesheets without Sass or Less

Dec 6, 2024
Read article
Webdev
4 min read

The What, Why, and How of Using a Skeleton Loading Screen

Skeleton loading screens enhance user experience and make your app feel faster

Nov 12, 2020
Read article
Webdev
3 min read

CSS @supports: Write Future-Proof CSS

Detect CSS feature support and provide smart fallbacks with @supports

Dec 6, 2024
Read article
Webdev
3 min read

align-content: The Simplest Way to Center Content with CSS

Finally, we can center things in block layouts without flexbox gymnastics

Dec 13, 2024
Read article
Webdev
4 min read

HTTP CONNECT: Building Secure Tunnels Through Proxies

Understand how HTTP CONNECT enables HTTPS traffic through proxies

Nov 28, 2024
Read article
Webdev
5 min read

WebAssembly (Wasm): When (and When Not) to Use It

Understanding the real use cases for WebAssembly beyond the performance hype

Nov 25, 2024
Read article
Webdev
5 min read

Add Auth to Astro 5 with Clerk in 5 Minutes

The simplest setup for adding Clerk authentication to your Astro project, with minimal code

Dec 18, 2024
Read article
Webdev
3 min read

CSS :has() - The Parent Selector We've Always Wanted

Transform your CSS with :has(), the game-changing selector that finally lets us style elements based on their children.

Dec 4, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/native-popover-with-html. It was written by a human and polished using grammar tools for clarity.