A toolbar tooltip that smoothly follows hovered icons while a highlight pill animates beneath the active item.
Floating Tooltip is an interactive toolbar component powered by GSAP. When a user hovers over an icon, a highlight pill smoothly moves beneath the active tool while a floating tooltip container slides horizontally to stay centered above it. The tooltip label updates by shifting the internal text wrapper, ensuring the correct label aligns with the hovered icon. The entire interaction uses transform-based animations for smooth and performant motion, creating a polished UI pattern commonly seen in modern design tools, dashboards, and productivity interfaces.
npm i gsap @gsap/react lucide-react
Ideal for toolbars, editor interfaces, dashboards, navigation controls, and interactive panels where icons need contextual labels without permanently occupying space in the layout.
Easy-Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | Controls the easing curve used when the tooltip container and highlight pill move between toolbar icons. |
| duration | number | Duration (in seconds) of the tooltip and highlight transition when switching between tools. |
These components are designed for developers who have at least an intermediate understanding of React and GSAP. To fully customize, extend, or modify the behavior, familiarity with both libraries is recommended. They are not specifically intended for absolute beginners.
However, beginners can still use them by simply copying and pasting the code, it is already optimized and production-ready out of the box.
© 2026 dropui.design