Popover

Generic floating panel for rich content — as opposed to Tooltip's brief text hints or DropdownMenu's list-of-actions semantics. Built on Radix's Popover primitive.

<Popover>
  <PopoverTrigger asChild><Button variant="outline">What's included?</Button></PopoverTrigger>
  <PopoverContent>
    <p className="ui-text-[var(--ui-text-sm)] ui-text-[var(--ui-fg)]">
      The Pro plan includes unlimited projects, SSO, and priority support for up to 50 seats.
    </p>
  </PopoverContent>
</Popover>

Editable — change the code above and the preview updates live.

Installation

import { Popover, PopoverTrigger, PopoverContent } from "@labanaat/ui/popover";

Props

Popover accepts Radix's Popover.Root props. PopoverContent additionally accepts align and sideOffset for positioning.