Popover

A pop-up box controlled by a trigger element.

How to

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.

Scrollable 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 -->
</div>

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 -->
</div>

Custom Events #

You can open a popover element using the openPopover event:

function openPopover(element) {
  var event = new CustomEvent('openPopover');
  element.dispatchEvent(event);
};

var popover = document.getElementsByClassName('js-popover');
//open first popover available in your page
if(popover.length > 0) openPopover(popover[0]);

You can use the closePopover event if you need to close the popover:

function closePopover(element) {
  var event = new CustomEvent('closePopover');
  element.dispatchEvent(event);
};

var popover = document.getElementsByClassName('js-popover');
//close first popover available in your page
if(popover.length > 0) closePopover(popover[0]);

Categories

• Controls
• Overlays

Bug report & feedback

Component Github page ↗