Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Tooltip

Brief informational message that appears on hover

## Example​

    import {
      Button,
      Tooltip,
      TooltipContent,
      TooltipProvider,
      TooltipTrigger,
    } from "@databricks/appkit-ui/react"

    export default function TooltipExample() {
      return (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="outline">Hover</Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>Add to library</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      )
    }

## Tooltip​

Brief informational message that appears on hover

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

### Props​

Prop | Type | Required | 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

### Usage​

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

    <Tooltip /* props */ />

## TooltipContent​

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

### Props​

Prop | Type | Required | 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` |  | - | -

### Usage​

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

    <TooltipContent /* props */ />

## TooltipProvider​

Context provider for tooltip configuration

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

### Props​

Prop | Type | Required | 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

### Usage​

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

    <TooltipProvider /* props */ />

## TooltipTrigger​

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

### Props​

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

### Usage​

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

    <TooltipTrigger /* props */ />