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.

Inheritedwcimport '@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-arrowbooleantrueRenders the pointer arrow toward the trigger.
offsetnumber8Gap in pixels between trigger and panel.
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.
openbooleanfalseReflected open state.

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>.

Tokens

  • --color-background-elevation-raised · --color-border-default · --color-content-default
  • --color-gray-900 · --color-content-default-knockout (inverse appearance)
  • --elevation-4 · --z-dropdown
  • --radius-200 · --spacing-300