Triggering a Popover with Pure CSS (No JavaScript Required)

When building interactive web elements, it's common to rely on JavaScript for tasks like triggering popovers. However, CSS alone can often suffice for simple interactions. In this post, we'll demonstrate how to create a popover using only CSS. This approach is intended for demonstration purposes and may not replace JavaScript for more complex scenarios.

The Popover API

Before diving into the CSS-only solution, it's worth noting that modern browsers support the Popover API for handling popovers. This API provides a more robust and accessible way to manage popups, but for educational purposes, we'll explore a pure CSS approach.

HTML Structure

Here's the HTML structure we'll use:

<label id="acts-as-button" for="trigger">
  <input type="checkbox" name="trigger" id="trigger">
  Open
</label>

<div id="popover">
  <h1>Popover</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, labore!</p>
</div>

In this setup:

• A hidden checkbox (#trigger) controls the state of the popover.
• A label (#acts-as-button) acts as a button to toggle the checkbox.
• A div (#popover) contains the popover content.

CSS Styling

Next, we'll apply CSS to style the button and popover, and to control the popover's visibility based on the checkbox state.

#acts-as-button {
  background: orange;
  color: #845704;
  padding: 0.5rem 1rem;
  display: inline-block;
  cursor: pointer;
  width: fit-content;
  user-select: none;
}

#acts-as-button:hover,
#acts-as-button:has(#trigger:checked) {
  background: darkorange;
}

#trigger {
  display: none;
}

#popover {
  display: none;
  background-color: lightgrey;
  width: 300px;
  padding: 1rem;
  h1,
  p {
    margin: 0;
  }
  h1 {
    margin-bottom: 0.5rem;
  }
}

#acts-as-button:has(#trigger:checked) ~ #popover {
  display: block;
}

• #acts-as-button: Styled to look like a button, with a pointer cursor and a background color.
• #popover: Initially hidden (display: none), with a light grey background and padding.
• #acts-as-button:has(#trigger:checked) ~ #popover: Uses the :has pseudo-class to display the popover when the checkbox is checked.

Explanation

1. Button Styling: The label styled as a button is clickable, which toggles the checkbox.
2. Popover Visibility: The :has pseudo-class is used to target the label and check if it contains a checked checkbox. When the checkbox is checked, the popover's display property is set to block.

This method leverages CSS to achieve a simple popover effect without JavaScript. However, remember that this approach is mainly for demonstration. For more robust and accessible solutions, consider using the Popover API or JavaScript.

Conclusion

Creating popovers with pure CSS is a great way to understand CSS capabilities and limitations. While this method can be useful for simple cases, for production-ready applications, combining CSS with JavaScript or using built-in browser APIs is recommended for better control and accessibility.