Prototype Library

Popover

Anchored floating panel. The trigger goes in the default slot and the panel content in slot="content". Click mode closes on outside-click and Esc; hover mode opens after a short delay.

Inherited wc import '@esa/ecology/esa-popover';

Preview

Popover below the trigger.
 
<esa-popover position="bottom">
  <button>Open popover</button>
  <div slot="content">Popover below the trigger.</div>
</esa-popover>

Positions

Popover above the trigger.
Popover below the trigger.
Left side.
Right side.
 
<esa-popover position="top">…</esa-popover>
<esa-popover position="bottom">…</esa-popover>
<esa-popover position="left">…</esa-popover>
<esa-popover position="right">…</esa-popover>

Appearance

Two appearances, aligned to Beacon's PopoverAppearance. default is a light surface panel; inverse is a dark panel with light text — use it to signal documentation or help content rather than form data.

Light surface panel.
Dark panel, light text — for help content.
 
<esa-popover appearance="default">…</esa-popover>
<esa-popover appearance="inverse">…</esa-popover>

Trigger & arrow

Switch to trigger="hover" for a hover-revealed panel, or hide the pointer with has-arrow={false}.

Opens on hover after 200ms.
Arrowless popover.
 
<esa-popover position="bottom" trigger="hover">…</esa-popover>
<esa-popover position="bottom" has-arrow={false}>…</esa-popover>

API

PropTypeDefaultDescription
position 'top' | 'bottom' | 'left' | 'right' 'bottom' Side the panel opens on, relative to the trigger.
trigger 'click' | 'hover' 'click' Click toggles and closes on outside-click + Esc; hover opens after a 200ms delay.
has-arrow boolean true Renders the pointer arrow toward the trigger. Property: `hasArrow`. On by default. Write `="false"` to turn it off — unusually for a boolean attribute, this one reads the value.
offset number 8 Gap in pixels between trigger and panel.
open boolean false Reflected open state.
appearance 'default' | 'inverse' 'default' Panel style (aligned to Beacon): default is a light surface; inverse is a dark panel with light text, for documentation/help content. Reflected as an attribute.
label string '' Accessible name for the panel. When set, the panel is exposed as a dialog; when omitted it carries no role. It used to be an unconditional role="dialog" with no name, which is worse than no role — a screen reader announces "dialog" and has nothing to say about it, and the role promises focus management a non-modal popover does not implement.

Accessibility

  • The floating panel is role="dialog".
  • Click mode closes on Escape and on any click outside the component.
  • Keyboard and focus behavior come from whatever element you slot as the trigger — use a real <button>.