Building a Popover with only CSS

Popovers were once firmly in the domain of JavaScript. Today let's examine one of our non-JS options to build them. The goals Build a popover (click to open/close) Limit DOM use Require 0 JavaScript The results https://codepen.io/kallmanation/pen/g...

kallmanation.com4 min read

#css #css3 #tutorial

Responses1

Markdown supported · ⌘↵ to post

GV

Gary Varnum

I repurpose code borrowed from more talented programmers.

Feb 15, 2023

How could I close the popover without clicking on the <summary> element again? I would like to place a "close" icon in the <p> like in a modal, but can't tell how to hide the popover when the icon is clicked..

You might want to start reaching for a touch of JavaScript. It probably could be done without, but the complexity starts to make the tradeoff not make sense to avoid JS for the sake of avoiding JS. The JavaScript would listen for a click on your close icon and then remove the open attribute from the details DOM element.

NK

Nathan Kallman

Following Jesus; Husband; Father; Tinkerer

Mar 17, 2023

Search Hashnode

Building a Popover with only CSS

Responses1