---
title: "Discussion on \"Building a Popover with only CSS\" | Hashnode"
description: "Discussion on \"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.\nThe goals\n\nBuild a popover (click to open/close)\nLimit DOM use\nRequire 0 JavaScript\n\nThe results\nhttps://codepen.io/kallmanation/pen/g..."
url: "https://hashnode.com/posts/building-a-popover-with-only-css/61094c41725d9303e0350608"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Building a Popover with only CSS](https://www.kallmanation.com/building-a-popover-with-only-css?utm_source=hashnode&utm_medium=feed)

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...

Sep 17, 2020 · 4 min read · kallmanation.com  
Read the article

-   [#css](https://hashnode.com/tag/css)
-   [#css3](https://hashnode.com/tag/css3)
-   [#tutorial](https://hashnode.com/tag/tutorial)

## Written by

[Nathan Kallman](https://hashnode.com/@kallmanation)

@kallmanation · Grand Rapids, MI

  
[View profile](https://hashnode.com/@kallmanation)

Following Jesus; Husband; Father; Tinkerer

Following Jesus; Husband; Father; Developer; Gamer; Tinkerer; Writing about code

## Responses 1

Markdown supported · ⌘↵ to post

[Gary Varnum](https://hashnode.com/@varNum462)

[Feb 15, 2023](https://hashnode.com/posts/building-a-popover-with-only-css/61094c41725d9303e0350608/comment/63ed27ec3fa8ff4ff0097d5b)

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..

[Nathan Kallman](https://hashnode.com/@kallmanation)

[Mar 17, 2023](https://hashnode.com/posts/building-a-popover-with-only-css/61094c41725d9303e0350608/comment/63ed27ec3fa8ff4ff0097d5b#reply-641475ddaeaf57bb77b15709)

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.