Components

Popover

A flat, bordered signpost anchored to a trigger — a .ds-popover__title over a .ds-popover__body, separated from the page by a 1px border, no shadow. An optional rotated-square .ds-popover__arrow points back at the trigger.

Anatomy

A .ds-popover box with an uppercase __title and a __body. Add a placement modifier (--top / --bottom / --left / --right) plus .ds-popover__arrow to point at the trigger.

Signpost box

<div class="ds-popover ds-popover--bottom" role="dialog">
  <span class="ds-popover__arrow" aria-hidden="true"></span>
  <div class="ds-popover__title">Margin guard</div>
  <div class="ds-popover__body">This cell sits below the entity's target margin…</div>
</div>

Interactive

A trigger toggles the popover; it closes on outside-click or Escape. The small inline script below wires this demo (no dependencies).

Toggle on click

<span class="ds-popover-host" data-popover>
  <button class="ds-button" data-popover-trigger aria-haspopup="dialog" aria-expanded="false">Why flagged?</button>
  <div class="ds-popover ds-popover--bottom" role="dialog" data-popover-panel hidden>
    <span class="ds-popover__arrow" aria-hidden="true"></span>
    <div class="ds-popover__title">Margin guard</div>
    <div class="ds-popover__body">This cell is below the target margin…</div>
  </div>
</span>

React

The Popover toggles on trigger click and closes on outside-click / Escape. It works controlled (open/onOpenChange) or uncontrolled (defaultOpen), positioned with inline styles.

import { Popover, Button } from "@diametral/design-system/react";

<Popover
  placement="bottom"
  arrow
  title="Margin guard"
  trigger={<Button>Why flagged?</Button>}
>
  This cell is below the target margin for the selected entity.
</Popover>