Popover

Popover opens a non-modal dialog from its button, anchored in the select's dithered popup, for a small form or details. Opening it moves focus to its first control; Escape closes it and returns focus to the button, and a press outside or tabbing away closes it too. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Button } from "@/components/dithercharts/button"
import { Input } from "@/components/dithercharts/input"
import { Popover } from "@/components/dithercharts/popover"

<Popover
  content={
    <>
      <p>Show revenue between:</p>
      <Input label="Min" type="number" value={min} onChange={(e) => setMin(e.target.value)} />
      <Input label="Max" type="number" value={max} onChange={(e) => setMax(e.target.value)} />
    </>
  }
>
  <Button variant="outline">Filters</Button>
</Popover>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add popover

Props

It renders a native element, so every other attribute that element takes passes through.