Skip to content
OverlayBrowse overlay components
ComponentsOverlayNew in 0.2

Popover

Rich floating panel with arrow. For settings, inline help, or quick forms.

Live preview

Quick settings

Apply to this account.

Email digest
Auto-renew

Usage

Adapters:React stableVue stable
index.html
<span class="lm-popover">
  <button aria-haspopup="dialog">Open</button>
  <div class="lm-popover-content"><div class="lm-popover-arrow"></div>…</div>
</span>

CSS classes (3)

ClassDescription
lm-popoverAnchor wrapper
lm-popover-contentFloating card
lm-popover-arrowPointer arrow

React props (2)

PropTypeDefaultDescription
sidetop | right | bottom | left——
alignstart | center | end——

Accessibility

  • Use role='dialog' and aria-modal='true' for blocking overlays.
  • Trap focus inside the overlay; return focus to the trigger on close.
  • Provide aria-labelledby and aria-describedby.
  • Close on Escape and outside-click.

Spotted something wrong? Edit this entry on GitHub.