# Tooltip: Toolbar

> Rest on one button, then slide along the group. Tooltips under one `TooltipProvider` swap instantly while you move between them.

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

## Add this example

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

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

## Source

```tsx title="components/examples/tooltip/toolbar.tsx"
import {
  IconBold,
  IconItalic,
  IconLink,
  IconStrikethrough,
  IconUnderline,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd } from "@/components/ui/kbd"
import { TooltipGroup, TooltipTrigger } from "@/components/ui/tooltip"

const tools = [
  { label: "Bold", keys: "mod+b", icon: IconBold },
  { label: "Italic", keys: "mod+i", icon: IconItalic },
  { label: "Underline", keys: "mod+u", icon: IconUnderline },
  { label: "Strikethrough", keys: "mod+shift+x", icon: IconStrikethrough },
  { label: "Insert link", keys: "mod+k", icon: IconLink },
]

export function TooltipToolbar() {
  return (
    <TooltipGroup side="bottom">
      <ButtonGroup aria-label="Formatting">
        {tools.map(({ label, keys, icon: Icon }) => (
          <TooltipTrigger
            key={label}
            content={
              <>
                {label}
                <Kbd keys={keys} size="sm" />
              </>
            }
            render={<Button variant="outline" size="icon" aria-label={label} />}
          >
            <Icon />
          </TooltipTrigger>
        ))}
      </ButtonGroup>
    </TooltipGroup>
  )
}
```

## Props in this example

### TooltipTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

## 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)
- [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)
- [One tooltip, many triggers](https://hextaui.com/docs/tooltip/examples/detached.md)
- [Right to left](https://hextaui.com/docs/tooltip/examples/rtl.md)