# Tooltip (/docs/components/tooltip)



<ComponentPreview name="tooltip-demo" />

## Overview [#overview]

Use Tooltip to provide a short hint for an element.

Tooltips are useful for icon-only buttons, truncated labels, unfamiliar controls, and brief extra context. Do not use tooltips for information that is required to complete a task.

## Anatomy [#anatomy]

A tooltip has a trigger and popup content. The content should be short, usually one sentence or phrase.

## Behavior [#behavior]

Tooltips appear on hover or focus. They should not contain interactive controls because users may not be able to reach them reliably.

## Accessibility [#accessibility]

The trigger should make sense without the tooltip when possible. For icon-only controls, also provide an accessible name.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add tooltip
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="tooltip" title="components/ui/tooltip.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
```

```tsx
<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Hover me
  </TooltipTrigger>
  <TooltipPopup>Helpful hint</TooltipPopup>
</Tooltip>
```

**Grouping Tooltips**

To group multiple tooltips so they appear instantly after the first one is opened, wrap them in `TooltipProvider`. The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly.

```tsx
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Tooltip 1
    </TooltipTrigger>
    <TooltipPopup>Content 1</TooltipPopup>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger render={<Button variant="outline" />}>
      Tooltip 2
    </TooltipTrigger>
    <TooltipPopup>Content 2</TooltipPopup>
  </Tooltip>
</TooltipProvider>
```

## Examples [#examples]

The example shows grouped tooltips for related controls.

### Grouped Tooltips [#grouped-tooltips]

<ComponentPreview name="tooltip-grouped" />