Popovers are commonly used in web pages to display extra information to the user if they need it. This is quite common in forms, where the user will typically click an icon to see extra information or hints regarding a particular input field.
For the longest time, the only way you could create dynamic popovers was by writing a lot of CSS and some JavaScript code. But what if I told you the popover in the GIF below was created with just HTML and a few lines of CSS?
Yes, it’s true. This is all thanks to two new features: the Popover API (an HTML feature) and the CSS Anchor feature. Combined together, these features will change how you write CSS in unprecedented ways. Let’s see how.
Sidenote: If you’re new to learning web development, and you’re looking for the best resource to help with that, I strongly recommend HTML to React: The Ultimate Guide.
Creating the web page
To help visualize these new features, let’s create a simple HTML page.
Create a file named index.html in an empty folder and paste in the following markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="">
<div>
<div class="label-container">
<label for="confusing">Confusing Field</label>
<button id="btn" class="information">i</button>
<!-- <div>Extra</div> -->
</div>
<input type="text" id="confusing" />
</div>
</form>
</body>
</html>
This HTML document renders a form. Inside the label container, we commented out the div we’ll be using as the popover. This is because we want it to stay hidden, for now.
Next, create a file named style.css in the same directory as index.html and paste the following CSS markup:
.information {
all: unset;
background: #00aaff;
color: white;
border-radius: 9999px;
font-size: 1rem;
width: 1.2rem;
height: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer
}
.information:hover {
background: #0088ff;
}
.label-container {
display: flex;
gap: 0.25rem;
}
#confusing {
width: 15rem;
height: 1.5rem;
}
form {
margin: 30vh 30vw;
}
body {
height: 150vh;
font-size: 30px;
}
This is the result:
The CSS transformed the button into a little “i” icon. Oftentimes you see this icon when you’re filling out forms. It’s commonly used to provide extra information or hints regarding that particular input.
Traditionally, creating this popup required you to use a bunch of JavaScript or download a JavaScript library to handle the positioning.
But now you can do this with just HTML and a little bit of CSS, thanks to the new features I’ll be talking about next.
Introducing the Popover API
The Popover API has been added to HTML and currently has the support of most modern browsers. Basically, it’s a more customizable version of the Dialog API that requires no JavaScript at all.
The first step is to transform the div we commented out into a popover. The plan is to render the div anytime you click on the “i” icon.
All you need to turn an element into a popover is to add the popover attribute to it, like so:
<div popover>Extra</div>
Next, you need to hook the popover element up to another element. This element will trigger the popover when you click on it.
You must specify popovertarget attribute on the “trigger” element and ensure that its value matches that of the popover element. In this case, the trigger is our “i” icon:
<button popovertarget="info" id="btn" class="information">i</button>
<div id="info" popover>Extra</div>
Now, when you to go your browser and click on the “i” icon on the page, it’ll open up the popup. And if you click anywhere else on the page, it’ll close the popup.
This gives us a modal-style dialog element very similar to the HTML dialog element.
But one thing you’ll notice is how poorly the popover is positioned. We’ll take this a step further and position the popover exactly where we want it using the most amazing CSS feature I’ve seen in years: CSS Anchor.
CSS Anchor Basics
Before we dive into CSS Anchor, it’s important to note that the feature is not supported by all browsers at the time of writing this. The reason is that the feature is still in a very experimental phase.
However, if download Chrome Canary and enable the “Experimental Web Platform Features” option in chrome://flags, you’ll be able to use the feature. With that out of the way, let’s get back to CSS Anchor basics.
On the popover, add the anchor property and give it a name. This name should be the same as the ID of the element you want to anchor the popover to (in our case, we want to anchor it next to our button):
<div id="info" anchor="btn" popover>Extra</div>
Now in your stylesheet, you have to position the popover. Start by setting inset: unset to remove all the default top, bottom, right, and left button styles. Then position the popover relative to the “i” icon, which is its anchor:
[popover] {
inset: unset;
bottom: anchor(top);
left: anchor(center);
translate: -50%;
margin: 0.25rem 0;
}
Now when save the file and click the “i” icon, you’ll see that the popover is anchored to the top of the icon. And because of that, it’ll follow the icon wherever it goes.
So as you can see, with some CSS and a few lines of HTML, you created a tooltip popover that’s anchored to a specific element of my screen.
One last thing: At this point, the tooltip closes when you click anywhere on the page. But you might want to close the tooltip only when the “i” icon is clicked.
All you need to do is set the popover attribute to manual on the popover element:
<div id="info" anchor="btn" popover="manual">Extra</div>
If you click on the icon and click on somewhere else on the page, you’ll notice that the popover stays open, and only closes when you click the icon again. So basically, the icon toggles the pop-up.
Conclusion
The PopoverAPI lets you create popovers entirely inside your HTML markup. The new CSS Anchor feature allows you to perfectly anchor your popup to your preferred element on the page with just CSS (not one line of JavaScript required).
Want to collaborate with me? Fill out this form.
Top comments (0)