# Tooltip

Brief informational message that appears on hover

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
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[​](#tooltip-1 "Direct link to Tooltip")

Brief informational message that appears on hover

**Source:** [`packages/appkit-ui/src/react/ui/tooltip.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tooltip.tsx)

### Props[​](#props "Direct link to 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[​](#usage "Direct link to Usage")

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

<Tooltip /* props */ />

```

## TooltipContent[​](#tooltipcontent "Direct link to TooltipContent")

**Source:** [`packages/appkit-ui/src/react/ui/tooltip.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tooltip.tsx)

### Props[​](#props-1 "Direct link to 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[​](#usage-1 "Direct link to Usage")

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

<TooltipContent /* props */ />

```

## TooltipProvider[​](#tooltipprovider "Direct link to TooltipProvider")

Context provider for tooltip configuration

**Source:** [`packages/appkit-ui/src/react/ui/tooltip.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tooltip.tsx)

### Props[​](#props-2 "Direct link to 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[​](#usage-2 "Direct link to Usage")

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

<TooltipProvider /* props */ />

```

## TooltipTrigger[​](#tooltiptrigger "Direct link to TooltipTrigger")

**Source:** [`packages/appkit-ui/src/react/ui/tooltip.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/tooltip.tsx)

### Props[​](#props-3 "Direct link to Props")

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

### Usage[​](#usage-3 "Direct link to Usage")

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

<TooltipTrigger /* props */ />

```