Popover

import { Popover } from "density-base-ui";

export default function PopoverExample() {
  return (
    <Popover.Root>
      <Popover.Trigger>Show metrics</Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner sideOffset={8}>
          <Popover.Popup className="popover-example-popup">
            <Popover.Arrow className="popover-example-arrow" />
            <Popover.Title className="popover-example-title">
              Sprint health
            </Popover.Title>
            <Popover.Description className="popover-example-description">
              Velocity is steady and review time is down 18% this week.
            </Popover.Description>
            <Popover.Close>Close</Popover.Close>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}