Popover

Floating content panel anchored to a trigger element

Example

popover

Loading preview…

Floating content panel anchored to a trigger element

Source: packages/appkit-ui/src/react/ui/popover.tsx

Prop	Type	Default	Description
`open`	`boolean`	-	-
`defaultOpen`	`boolean`	-	-
`onOpenChange`	`((open: boolean) => void)`	-	-
`modal`	`boolean`	-	-

import { Popover } from '@databricks/appkit-ui';

<Popover /* props */ />

Source: packages/appkit-ui/src/react/ui/popover.tsx

Prop	Type	Required	Default	Description
`asChild`	`boolean`		-	-
`virtualRef`	`RefObject<Measurable>`		-	-

import { PopoverAnchor } from '@databricks/appkit-ui';

<PopoverAnchor /* props */ />

Source: packages/appkit-ui/src/react/ui/popover.tsx

Prop	Type	Default	Description
`forceMount`	`true`	-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`asChild`	`boolean`	-	-
`onEscapeKeyDown`	`((event: KeyboardEvent) => void)`	-	Event handler called when the escape key is down. Can be prevented.
`onPointerDownOutside`	`((event: PointerDownOutsideEvent) => void)`	-	Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
`onFocusOutside`	`((event: FocusOutsideEvent) => void)`	-	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
`onInteractOutside`	`((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)`	-	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
`onOpenAutoFocus`	`((event: Event) => void)`	-	Event handler called when auto-focusing on open. Can be prevented.
`onCloseAutoFocus`	`((event: Event) => void)`	-	Event handler called when auto-focusing on close. Can be prevented.
`align`	`enum`	-	-
`side`	`enum`	-	-
`sideOffset`	`number`	-	-
`alignOffset`	`number`	-	-
`arrowPadding`	`number`	-	-
`avoidCollisions`	`boolean`	-	-
`collisionBoundary`	`Boundary \| Boundary[]`	-	-
`collisionPadding`	`number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>>`	-	-
`sticky`	`enum`	-	-
`hideWhenDetached`	`boolean`	-	-
`updatePositionStrategy`	`enum`	-	-

import { PopoverContent } from '@databricks/appkit-ui';

<PopoverContent /* props */ />

Source: packages/appkit-ui/src/react/ui/popover.tsx

Prop	Type	Required	Default	Description
`asChild`	`boolean`		-	-

import { PopoverTrigger } from '@databricks/appkit-ui';

<PopoverTrigger /* props */ />