> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/tooltip.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Tooltip

Add a brief explanation to a page element.

## Basic usage


toprightbottomleft

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/tooltip/basic.tsx"
import { Button, Flex, Tooltip } from '@ifhover/leaf-ui';

import { Info } from 'lucide-react';

export function TooltipBasic() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      {(['top', 'right', 'bottom', 'left'] as const).map((placement) => (
        <Tooltip
          key={placement}
          placement={placement}
          content="Save changes to the current project"
        >
          <Button variant="outline">{placement}</Button>
        </Tooltip>
      ))}
      <Tooltip content="This setting applies to all projects">
        <Button variant="ghost" startIcon={<Info />} aria-label="Settings information" />
      </Tooltip>
    </Flex>
  );
}
```

Expand code

## Tooltip API

| Prop                      | Type                                                                                                                                                                 | Default  | Description                                        |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------- |
| `content`                 | `ReactNode`                                                                                                                                                          | Required | Tooltip content                                    |
| `children`                | `ReactElement`                                                                                                                                                       | Required | Trigger element supporting a ref and events        |
| `placement`               | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `'top'`  | Preferred placement; adjusts when space is limited |
| `open / defaultOpen`      | `boolean`                                                                                                                                                            | `false`  | Controlled / initial open state                    |
| `onOpenChange`            | `(open: boolean) => void`                                                                                                                                            | —        | Open state change                                  |
| `disabled`                | `boolean`                                                                                                                                                            | `false`  | Disable the tooltip                                |
| `enterDelay / leaveDelay` | `number`                                                                                                                                                             | `100`    | Pointer enter / leave delays in milliseconds       |
| `className`               | `string`                                                                                                                                                             | —        | Tooltip panel class                                |

## Types

Import the component props and item types when preparing your own values.

```ts
import type { TooltipProps } from '@ifhover/leaf-ui';
```

## Usage notes

Hover and keyboard focus both open the tooltip; Escape closes it. Existing events, refs and aria-describedby are preserved. Disabled buttons cannot receive focus; use a focusable span wrapper when needed. Use tooltips for explanatory text and a Dropdown or dialog for interactive actions.