CSS :popover-open

The :popover-open pseudo-class matches an element with the HTML popover attribute while that popover is open. It is part of the native Popover API, not a Bootstrap-specific selector.

Syntax

[popover]:popover-open {
  opacity: 1;
}

Example

[popover] {
  border: 1px solid #94a3b8;
  padding: 1rem;
}

[popover]:popover-open {
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
Result:
Native popover content

Important note

Use popover and popovertarget for the native feature. Framework popovers may use different markup and classes.

In this example, the button with the class popover-button will trigger the display of the popover with the ID popover1. When the popover is opened through JavaScript (not provided here for brevity), you can apply styles using the :popover-open selector.


/* CSS example for active popover */
.popover-content {
    display: none; /* Initially hidden */
    position: absolute;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* When popover is active */
.popover-open .popover-content {
    display: block; /* Show popover */
}

/* This is an example CSS rule */
.hidden {
    display: none; /* A utility class to hide elements */
}

By adding the relevant JavaScript functionality to toggle the class popover-open on the body or a parent element, you can effectively show or hide the popover based on user interaction.

This tutorial outlines how to implement a popover using the :popover-open pseudo-class and provides a working example along with the relevant CSS. The popover structure and behaviors should be implemented via JavaScript. Adjustments may be needed based on your specific CSS or framework setup.