StockFind Brand

Popovers

Rich content overlays

Basic Usage

<Popover>
  <Popover.Trigger>
    <Button variant="secondary">Open Popover</Button>
  </Popover.Trigger>
  <Popover.Content placement="bottom">
    <Popover.Arrow />
    <Popover.Dialog>
      <Popover.Heading>Stock Details</Popover.Heading>
      <div className="flex flex-col gap-2 text-sm">
        <div className="flex justify-between gap-8">
          <span className="text-muted">Market Cap</span>
          <span className="font-medium tabular-nums">$2.8T</span>
        </div>
      </div>
    </Popover.Dialog>
  </Popover.Content>
</Popover>

On this page