Popover

Floating content anchored to a trigger.

PopoverProps packages/core/src/popups.ts:197 ↗

Import

import { Popover } from "@tarve/core";

Usage

Popover.tsx

import { Button, Popover, Text } from "@tarve/core";

let open = false;

<Popover
  id="filters"
  open={open}
  trigger={<Button variant="outline">Filters</Button>}
  onOpenChange={(next) => {
    open = next;
  }}
>
  <Text>Filter options go here.</Text>
</Popover>

Props

Prop	Type	Default
`id` required	`string`	—
`open` required	`boolean`	—
`trigger` required	`Child`	—
`contentStyle`	`Style`	—
`disabled`	`boolean`	`false`
`label`	`string`	—
`onOpenChange`	`(open: boolean) => void`	—
`side`	`PopupSide`	`"bottom"`
`triggerStyle`	`Style`	—

Common props

Shared by every component. See descriptions →

childrenhighlightkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

PopupSide

type PopupSide = "top" | "right" | "bottom" | "left";