Popover

Floating panel anchored to a trigger.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import { Popover, PopoverTrigger, PopoverContent } from "@aspyn-io/kit";

Inline settings panel

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Dimensions</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="grid grid-cols-2 items-center gap-2">
      <Label htmlFor="width">Width</Label>
      <Input id="width" defaultValue="100%" className="h-8" />
      <Label htmlFor="height">Height</Label>
      <Input id="height" defaultValue="25px" className="h-8" />
    </div>
  </PopoverContent>
</Popover>

Alignment

<PopoverContent align="start" side="bottom" sideOffset={8}>…</PopoverContent>

Notes

Popover is for interactive content; Tooltip is for short, read-only hints.