# Tooltip: One tooltip, many triggers

> Create a handle with `createTooltipHandle` and pass a `payload` from each trigger to share a single tooltip.

Example: https://hextaui.com/docs/tooltip/examples/detached
Component docs: https://hextaui.com/docs/tooltip.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/tooltip-detached.json
```

This adds `components/examples/tooltip/detached.tsx` with the Tooltip component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/tooltip/detached.tsx"
"use client"

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  createTooltipHandle,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

type Person = { name: string; initials: string; status: string }

const people: Person[] = [
  { name: "Ada Lovelace", initials: "AL", status: "Online" },
  { name: "Alan Turing", initials: "AT", status: "In a meeting" },
  { name: "Grace Hopper", initials: "GH", status: "Away" },
]

const presence = createTooltipHandle<Person>()

export function TooltipDetached() {
  return (
    <TooltipProvider>
      <div className="flex items-center gap-2">
        {people.map((person) => (
          <TooltipTrigger
            key={person.name}
            handle={presence}
            payload={person}
            aria-label={person.name}
            render={
              <button className="rounded-full outline-none focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden" />
            }
          >
            <Avatar>
              <AvatarFallback>{person.initials}</AvatarFallback>
            </Avatar>
          </TooltipTrigger>
        ))}
        <Tooltip handle={presence}>
          {({ payload }) => (
            <TooltipContent side="bottom">
              {payload ? `${payload.name} · ${payload.status}` : null}
            </TooltipContent>
          )}
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}
```

## Props in this example

### Tooltip

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `handle` | `TooltipHandle<Payload>` | – | From createTooltipHandle. |

### TooltipTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `handle` | `TooltipHandle<Payload>` | – |  |
| `payload` | `Payload` | – |  |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### TooltipContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"` | `"top"` |  |

## More Tooltip examples

- [Sides](https://hextaui.com/docs/tooltip/examples/sides.md)
- [With an arrow](https://hextaui.com/docs/tooltip/examples/arrow.md)
- [Keyboard shortcut](https://hextaui.com/docs/tooltip/examples/shortcut.md)
- [Toolbar](https://hextaui.com/docs/tooltip/examples/toolbar.md)
- [Disabled](https://hextaui.com/docs/tooltip/examples/disabled.md)
- [Long content](https://hextaui.com/docs/tooltip/examples/long-content.md)
- [Controlled](https://hextaui.com/docs/tooltip/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/tooltip/examples/rtl.md)