Popover — Teasim

A positioned panel with heading and description. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

popover, popover-content, popover-header, popover-title, popover-description, popover-content--block-start, popover-content--block-start-inline-start, popover-content--block-start-inline-end
popover-content--inline-end, popover-content--inline-end-block-start, popover-content--inline-end-block-end, popover-content--block-end, popover-content--block-end-inline-start, popover-content--block-end-inline-end, popover-content--inline-start, popover-content--inline-start-block-start
popover-content--inline-start-block-end

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

html

<div class="popover">
  <button type="button" popovertarget="details" aria-haspopup="dialog">Details</button>
  <div id="details" class="popover-content popover-content--block-end" popover
       role="dialog" aria-labelledby="details-title">
    <header class="popover-header"><h2 id="details-title" class="popover-title">Details</h2></header>
    <p class="popover-description">Information about this item.</p>
  </div>
</div>

Variants and composition

popover-content accepts 12 logical placement modifiers around its anchor. Supported anchor positioning tries the requested side, then a flip, then span-all; that final fallback may overlap the trigger. It is a viewport fallback, not a promise that content can never collide with its trigger.

For shared inner spacing, use popover-content p:0 gap:0 outside an overlay-content child. See Overlay commons for the single-padding-owner rule.

Behavior and accessibility

Native popover provides Escape and light dismissal when used with popovertarget. Placement and focus return for other modes remain application behavior.

Reference

See the interactive Storybook specimen. Continue to Progress or return to the Official preset overview.