---
title: Tooltip (React) - USWDS + Tailwind
description: Show a short explanation when someone hovers over or focuses an
  element with a tooltip.
---

# Tooltip

Show a short explanation when someone hovers over or focuses an element with a tooltip.

## Examples

```tsx
import { Button, Tooltip } from '@uswds-tailwind/react'

export default function TooltipDemo() {
  return (
    <div className="flex flex-wrap justify-center gap-4 py-12">
      <Tooltip content="Top tooltip" position="top"><Button>Top</Button></Tooltip>
      <Tooltip content="Right tooltip" position="right"><Button>Right</Button></Tooltip>
      <Tooltip content="Bottom tooltip" position="bottom"><Button>Bottom</Button></Tooltip>
      <Tooltip content="Left tooltip" position="left"><Button>Left</Button></Tooltip>
    </div>
  )
}
```

## Component API

Use Root with Trigger and Content, or the Tooltip convenience component for a single trigger.

### Root `<div>`

Owns the tooltip state and text.

| Prop | Type | Default | Description |
| - | - | - | - |
| `content` | `string (required)` | `—` | Text shown in the tooltip. |
| `position` | `Tooltip position` | `top` | Preferred placement. |
| `defaultOpen` | `boolean` | `—` | Initially open state. |
| `open` | `boolean` | `—` | Controlled open state. |
| `onOpenChange` | `({ open: boolean }) => void` | `—` | Receives requested open-state changes. |
| `ids` | `{ root?: string; trigger?: string; content?: string }` | `—` | Overrides generated part IDs. Use Root IDs when a label or external control needs a stable input or trigger target. |

Escape dismisses an open tooltip. In controlled mode, update open after onOpenChange requests dismissal.

### Trigger

Clones its single child element and adds tooltip trigger behavior.

### Content `<div>`

Displays the tooltip text.

| Attribute | Value | Purpose |
| - | - | - |
| `data-state` | `open \| closed` | Style the open and closed states. |
| `data-placement` | `top \| bottom \| left \| right` | Positions the tooltip. |
| `data-visible` | `Present after opening transition` | Styles the visible state. |

### Tooltip

Convenience wrapper around Root, Trigger, and Content.

| Prop | Type | Default | Description |
| - | - | - | - |
| `content` | `string (required)` | `—` | Tooltip text. |
| `position` | `Tooltip position` | `top` | Preferred placement. |

### Accessibility

Make the trigger keyboard reachable and name the trigger independently of the tooltip content.