Узкая вертикальная панель с круглыми кнопками. Сбоку от неё живёт одна общая подсказка: все подписи сложены в столбик, а clip-path оставляет видимой только ту, что относится к наведённой кнопке.
При переходе курсора между кнопками подсказка на пружине съезжает к новой иконке, а вырез одновременно перетекает на нужную строку, поэтому подпись меняется без мерцания. Когда курсор уходит с панели, подсказка плавно гаснет.
Скопируйте эти файлы в components/vertical-toolbar-tooltips/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { MessageCircle } from "lucide-react";
import {
VtooltipContent,
VtooltipItem,
VtooltipRoot,
VtooltipTrigger,
} from "@/components/vertical-toolbar-tooltips/vertical-toolbar-tooltips";
export function SideToolbar() {
return (
<VtooltipRoot side="left" springConfig={{ stiffness: 400, damping: 30, mass: 0.8 }}>
<div className="flex flex-col rounded-full bg-black p-2">
<VtooltipItem index={0}>
<VtooltipTrigger>
<MessageCircle className="size-8 p-1.5" />
</VtooltipTrigger>
<VtooltipContent>
<span className="px-2 text-sm">Комментарий</span>
</VtooltipContent>
</VtooltipItem>
</div>
</VtooltipRoot>
);
}side?С какой стороны от панели появляется подсказка
Тип "left" | "right" | "top" | "bottom"·По умолчанию "right"
springConfig?Пружина, с которой перетекает вырез подсказки
Тип SpringOptions
tooltipColor?Цвет фона подсказки
Тип string
className?Классы подсказки
Тип string
children?Панель с элементами VtooltipItem
Тип ReactNode
VtooltipItem принимает index — порядковый номер кнопки, а внутри — VtooltipTrigger с иконкой и VtooltipContent с подписью.