Tooltip

Brief informational message that appears on hover

Example

tooltip

Loading preview…

Brief informational message that appears on hover

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

Prop	Type	Default	Description
`open`	`boolean`	-	-
`defaultOpen`	`boolean`	-	-
`onOpenChange`	`((open: boolean) => void)`	-	-
`delayDuration`	`number`	-	The duration from when the pointer enters the trigger until the tooltip gets opened. This will override the prop with the same name passed to Provider. @defaultValue 700
`disableHoverableContent`	`boolean`	-	When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. @defaultValue false

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

<Tooltip /* props */ />

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

Prop	Type	Default	Description
`forceMount`	`true`	-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`aria-label`	`string`	-	A more descriptive label for accessibility purpose
`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 `Tooltip`. 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 { TooltipContent } from '@databricks/appkit-ui';

<TooltipContent /* props */ />

Context provider for tooltip configuration

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

Prop	Type	Default	Description
`delayDuration`	`number`	-	The duration from when the pointer enters the trigger until the tooltip gets opened. This will override the prop with the same name passed to Provider. @defaultValue 700
`skipDelayDuration`	`number`	-	How much time a user has to enter another trigger without incurring a delay again. @defaultValue 300
`disableHoverableContent`	`boolean`	-	When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. @defaultValue false

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

<TooltipProvider /* props */ />

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

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

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

<TooltipTrigger /* props */ />