Posted on Aug 30 • Originally published at letsusetech.com 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.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: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: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.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: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: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.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):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: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: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.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).If you’re new to learning web development, and you’re looking for the best resource to help with that, check out HTML to React: The Ultimate Guide.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse ymc9 - Aug 16 Ege Aytın - Aug 17 Anjan Karmakar - Aug 26 Elizabeth Mattijsen - Aug 25 Once suspended, ubahthebuilder will not be able to comment or publish posts until their suspension is removed. Once unsuspended, ubahthebuilder will be able to comment and publish posts again. Once unpublished, all posts by ubahthebuilder will become hidden and only accessible to themselves. If ubahthebuilder is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Kingsley Ubah. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag ubahthebuilder: ubahthebuilder consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging ubahthebuilder will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.