HoverCard

Content card that appears when hovering over an element

Example

hover-card

Loading preview…

Content card that appears when hovering over an element

Source: packages/appkit-ui/src/react/ui/hover-card.tsx

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

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

<HoverCard /* props */ />

Source: packages/appkit-ui/src/react/ui/hover-card.tsx

Prop	Type	Default	Description
`forceMount`	`true`	-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`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 `HoverCard`. Can be prevented.
`onFocusOutside`	`((event: FocusOutsideEvent) => void)`	-	Event handler called when the focus moves outside of the `HoverCard`. Can be prevented.
`onInteractOutside`	`((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)`	-	Event handler called when an interaction happens outside the `HoverCard`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
`asChild`	`boolean`	-	-
`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 { HoverCardContent } from '@databricks/appkit-ui';

<HoverCardContent /* props */ />

Source: packages/appkit-ui/src/react/ui/hover-card.tsx

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

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

<HoverCardTrigger /* props */ />