## Toolbar Tooltips (S—083)

An icon toolbar whose single tooltip glides between buttons instead of fading in and out for each one.

- URL: https://sundaeui.dev/components/toolbar-tooltips
- Category: Navigation & menus · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/toolbar-tooltips.json`
- Tags: shortcut, icons, editor, toolbar, hover, tooltip

After the first tooltip opens with a short delay, moving across the toolbar slides the same tooltip to the next button and swaps its text instantly, the way native app toolbars feel.
Leaving the toolbar closes it; coming back within half a second skips the delay. Each tooltip shows its keyboard shortcut.

### Usage

```tsx
import { ToolbarTooltips } from '@/components/sundae/toolbar-tooltips'

<ToolbarTooltips />
```

### Props

- `items` (`{ id: string; label: string; shortcut?: string; icon: ReactNode }[]`, required): Buttons.
- `onAction` (`(id: string) => void`): Called on click.
- `delay` (`number`, default `400`): First-open delay in ms.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Editors, canvases and media controls with icon-only buttons.

### When not to use

- Buttons that already show text.

### Accessibility

- role="toolbar" with roving focus via arrow keys.
- Each button is labelled; the tooltip is aria-hidden duplicate text so nothing is read twice.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Move between tools