Shared Tooltip

Dec 2025

A toolbar tooltip that slides and clips to reveal only the active label. Inspired by Rauno Freiberg's work on the Vercel toolbar.

How It Works

Unlike traditional tooltips where each button has its own tooltip element, this component uses a single sliding container that holds all labels. The magic happens through two CSS techniques working together:

  1. translateX — When hovering a button, the label container slides horizontally to align the corresponding label with the button
  2. clip-path: inset() — A clipping mask reveals only the active label, hiding the rest

Both values are calculated dynamically using getBoundingClientRect() and offsetWidth to measure the exact positions of buttons and labels at runtime. This means you can add or remove items without updating any hardcoded values.

When entering the toolbar from outside, the tooltip appears instantly at the correct position. But when moving between buttons, it animates smoothly. This is achieved by tracking the previous hover state with a ref—transitions are only enabled when you were already hovering.

Accessibility

The visual effect is polished, but custom tooltips like this one present unique accessibility challenges. Here's what I implemented:

  • aria-label on each button — Screen readers announce the label directly, so users don't rely on the visual tooltip
  • onFocus handler — Keyboard users see the tooltip when tabbing through buttons, not just on hover
  • focus-visible ring — A visible focus indicator appears only for keyboard navigation
  • role="toolbar" — Semantic grouping for the button container
  • role="tooltip" + aria-hidden — The tooltip is properly hidden from screen readers when not visible

This treats the sliding tooltip as progressive enhancement—sighted users get the animation, while keyboard and screen reader users get full functionality through standard patterns.

Next
TOC Pill