Popover

Popovers display rich, interactive content in a floating panel anchored to a trigger. Unlike tooltips, they can contain links, buttons, and form controls; unlike dropdowns, they are meant for arbitrary content rather than menus.

Popovers display rich, interactive content in a floating panel anchored to a trigger. Unlike tooltips, popovers can contain links, buttons, and form controls; unlike dropdowns, they’re meant for arbitrary content rather than menus.

Provide the trigger through the anchor slot and the content through the default slot. Activating the trigger toggles the popover, and it closes when you click outside or press Escape.

The popover sets aria-haspopup="dialog" and aria-expanded on its trigger as soon as it has rendered, and updates aria-expanded as it opens and closes, so screen readers announce that it opens a dialog and whether it is open. That includes a popover that starts open, a trigger that is a disabled button, and a popover inside something that isn’t shown yet or is inert, such as a closed dialog, an inactive tab panel or an inert container. An <ahi-button> or <ahi-icon-button> passes them to the button it renders.

How the popover picks its trigger:

• It uses the first element in the anchor slot that is or contains something you can tab to.
• If none does, it also counts disabled elements, then hidden or inert ones, then both, and takes the first match. Among hidden or inert ones, an element that isn’t display: none on its own comes first, so inside a closed dialog or an inactive tab panel the trigger that will be shown wins over one that only some screen sizes show.
• It picks again when the slot changes, once the elements in it first render or are defined, when the popover is added back to the page, and each time open changes. It doesn’t pick again when an element is shown, enabled or made interactive, or gains content inside an element already in the slot, so the element it picked keeps the state until then, even if a later one is the one that ends up shown.
• Each pick sets aria-haspopup and aria-expanded again. If an element stops being the trigger while the popover is on the page, it gets back the values it had before, except any you changed on it after the popover last set them.

<ahi-popover>
  <ahi-button slot="anchor">Toggle popover</ahi-button>
  <div style="max-width: 20rem;">
    <strong>Popover title</strong>
    <p style="margin: var(--ahi-space-2) 0 0;">
      Popovers can contain interactive content such as <a class="ahi-link" href="#">links</a> and buttons.
    </p>
  </div>
</ahi-popover>

        
  
        
      

Popovers render in the browser’s native top layer, so they’re never clipped by containers with overflow: auto|hidden|scroll — no hoisting required.

Examples

Placement

Use the placement attribute to set the preferred position. The popover will automatically flip and shift to stay in view.

<ahi-popover placement="right">
  <ahi-button slot="anchor">Right</ahi-button>
  <div>This popover prefers the right side.</div>
</ahi-popover>

        
  
        
      

Distance & skidding

Use distance to change the gap between the popover and its anchor, and skidding to offset it along the anchor.

<ahi-popover distance="16" skidding="0">
  <ahi-button slot="anchor">Farther away</ahi-button>
  <div>This popover sits 16px from the anchor.</div>
</ahi-popover>

        
  
        
      

Without an arrow

Add the without-arrow attribute to remove the arrow.

<ahi-popover without-arrow>
  <ahi-button slot="anchor">No arrow</ahi-button>
  <div>This popover has no arrow.</div>
</ahi-popover>

        
  
        
      

Interactive content

Popovers are designed for interactive content such as forms. Add data-popover="close" to any element inside the popover to make it close the popover when activated.

<ahi-popover label="Rename">
  <ahi-button slot="anchor">Rename item</ahi-button>
  <form style="display: flex; flex-direction: column; gap: var(--ahi-space-3); min-width: 16rem;">
    <ahi-input label="New name" value="Untitled"></ahi-input>
    <div style="display: flex; gap: var(--ahi-space-2); justify-content: flex-end;">
      <ahi-button size="small" data-popover="close">Cancel</ahi-button>
      <ahi-button size="small" variant="primary" data-popover="close">Save</ahi-button>
    </div>
  </form>
</ahi-popover>

        
  
        
      

Keeping the popover open or closed

The ahi-show and ahi-hide events can be cancelled. Call event.preventDefault() in an ahi-show listener to keep the popover closed, or in an ahi-hide listener to keep it open. The popover’s open property and its trigger’s aria-expanded then stay as they were. Both events bubble, so check event.target when the popover holds a component that emits its own, such as a dropdown.

<ahi-popover label="Pinned note" class="popover-keep-open">
  <ahi-button slot="anchor">Pinned note</ahi-button>
  <ahi-checkbox checked>Keep this open</ahi-checkbox>
</ahi-popover>

<script>
  const popover = document.querySelector('.popover-keep-open');
  const keepOpen = popover.querySelector('ahi-checkbox');

  // Keep the popover open while the box is checked
  popover.addEventListener('ahi-hide', event => {
    if (event.target === popover && keepOpen.checked) {
      event.preventDefault();
    }
  });
</script>

        
  
        
      

Setting a maximum width

Use the --max-width custom property to constrain the body’s width.

<ahi-popover style="--max-width: 15rem;">
  <ahi-button slot="anchor">Narrow</ahi-button>
  <div>This popover's body is capped at 15rem, so longer content wraps sooner.</div>
</ahi-popover>

        
  
        
      

Importing

<script type="module" src="/path/to/azalea-kit-ui/dist/components/popover/popover.js"></script>
        
  
        
      

import '@azaleahealth/azalea-kit-ui/dist/components/popover/popover.js';
        
  
        
      

Slots

Learn more about using slots.

Properties

Learn more about properties and attributes.

Events

Learn more about events.

Methods

Learn more about methods.

Custom Properties

Learn more about customizing CSS custom properties.

CSS Parts

Learn more about customizing CSS parts.

Animations

Learn more about customizing animations.

Dependencies

This component automatically imports the following dependencies.

• <ahi-popup>