A pop-up box controlled by a trigger element.
All components are based on CodyFrame.
The popover component is used to reveal additional content and functionalities. Its visibility is triggered by a control element (e.g., <button>).
To connect the control with the popover, make sure the aria-controls value of the control is equal to the popover id value.
The vertical gap between the popover element and its control is set using the
--popover-vertical-gap CSS custom property (deafult value is 4px).
The popover is viewport aware: its position, relative to the trigger element, is automatically updated based on the available space.
When the popover element is open, the
.popover-control--active class is added to its control element.
When the user starts scrolling the page, any visible popover element is closed.
By default, the window is the element generating the vertical scrollbar. If you have a different scrollable element in your page (e.g., an element that has an overflow set to scroll) and you want the popover to close when this element is scrolled, you can use the
data-scrollable-element attribute to pass the CSS selector of the scrollable element.
<div class="popover js-popover" role="dialog" id="popover-example" data-scrollable-element="#scrollable-element">
<!-- popover content here -->
Note: for the popover to work properly, make sure the
.js-popover element is not inside a scrollable container.
Position Target #
By default, the popover is aligned with its control element.
If you want to align the popover with a different target, add a
data-position-target attribute equal to a unique CSS selector of the new target element:
<button class="btn btn--primary" aria-controls="popover-example">Popover Control</button>
<div id="popover-target">The popover will align with this element</div>
<div data-position-target="#popover-target" id="popover-example" class="popover bg padding-sm radius-md shadow-md js-popover" role="dialog">
<!-- popover content -->