# Tooltip · HeroUI

> Displays informative text when users hover over or focus on an element

- Page: https://jiguang132.com/systems/heroui/docs/components/tooltip
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Import

```tsx
import { Tooltip } from '@heroui/react';
```

### Usage


> Example `tooltip-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tooltip


### Anatomy

Import the Tooltip component and access all parts using dot notation.

```tsx
import { Tooltip, Button } from '@heroui/react';

export default () => (
  <Tooltip>
    <Tooltip.Trigger>
      <Button>Hover for tooltip</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>
      <Tooltip.Arrow />
      Helpful information about this element
    </Tooltip.Content>
  </Tooltip>
)
```

### With Arrow


> Example `tooltip-with-arrow`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tooltip


### Placement


> Example `tooltip-placement`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tooltip


### Custom Triggers


> Example `tooltip-custom-trigger`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tooltip


### Custom Render Function


> Example `tooltip-custom-render-function`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/tooltip


## Styling

### Global Delay Configuration

You can set default show and hide delays for all Tooltip components in your application by defining CSS variables:

```css
/* In your global CSS file */
:root {
  --tooltip-delay: 1500ms;
  --tooltip-close-delay: 500ms;
}

/* You can also set different values for light/dark themes */
.light, [data-theme="light"] {
  --tooltip-delay: 1200ms;
}

.dark, [data-theme="dark"] {
  --tooltip-close-delay: 300ms;
}
```

Values accept CSS time units such as `ms` and `s`. These global settings are overridden by the `delay` and `closeDelay` props when specified on individual tooltips.

### Passing Tailwind CSS classes

```tsx
import { Tooltip, Button } from '@heroui/react';

function CustomTooltip() {
  return (
    <Tooltip>
      <Tooltip.Trigger>
        <Button>Hover me</Button>
      </Tooltip.Trigger>
      <Tooltip.Content className="bg-accent text-accent-foreground">
        <p>Custom styled tooltip</p>
      </Tooltip.Content>
    </Tooltip>
  );
}
```

### Customizing the component classes

To customize the Tooltip component classes, you can use the `@layer components` directive.
  
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

```css
@layer components {
  .tooltip {
    @apply rounded-xl shadow-lg;
  }

  .tooltip__trigger {
    @apply cursor-help;
  }
}
```

HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize.

### CSS Classes

The Tooltip component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/tooltip.css)):

#### Base Classes
- `.tooltip` - Base tooltip styles with animations
- `.tooltip__trigger` - Trigger element styles

### Interactive States

The component supports animation states:

- **Entering**: `[data-entering]` - Applied during tooltip appearance
- **Exiting**: `[data-exiting]` - Applied during tooltip disappearance
- **Placement**: `[data-placement="*"]` - Applied based on tooltip position

## API Reference

### Tooltip Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Trigger element and content |
| `delay` | `number` | `1500` or CSS variable | Delay in milliseconds before showing the tooltip. Can be globally configured via `--tooltip-delay` |
| `closeDelay` | `number` | `500` or CSS variable | Delay in milliseconds before hiding the tooltip. Can be globally configured via `--tooltip-close-delay` |
| `trigger` | `"hover" \| "focus"` | `"hover"` | How the tooltip is triggered |
| `isDisabled` | `boolean` | `false` | Whether the tooltip is disabled |

### Tooltip.Content Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Content to display in the tooltip |
| `showArrow` | `boolean` | `false` | Whether to show the arrow indicator |
| `offset` | `number` | `3` (7 with arrow) | Distance from the trigger element |
| `placement` | `"top" \| "bottom" \| "left" \| "right"` (and variants) | `"top"` | Placement of the tooltip |
| `className` | `string` | - | Additional CSS classes |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function.|

### Tooltip.Trigger Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Element that triggers the tooltip |
| `className` | `string` | - | Additional CSS classes |

### Tooltip.Arrow Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | - | Custom arrow element |
| `className` | `string` | - | Additional CSS classes |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, OverlayArrowRenderProps>` | - | Overrides the default DOM element with a custom render function.|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt