Tooltip Rail
ツールチップレール
A column of icons whose names slide out from the rail on hover. The labels are revealed by clip-path↗↗ rather than by animating width: the text is laid out at full size from the start and simply uncovered, so it never reflows mid-animation the way a growing box makes it. Icons carry their name as an accessible label whether or not the tooltip is open. Built with Framer Motion and Tailwind CSS.
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { motion } from "framer-motion"
import { useState, type ReactNode } from "react"
export type RailItem = {
id: string | number,
label: string,
icon: ReactNode
}
How to use it3
"use client"
import { TooltipRail } from "@/components/ui/tooltip-rail"
const items = [
{ id: "files", label: "Files", icon: <FileIcon /> },
{ id: "search", label: "Search", icon: <SearchIcon /> },
]
export default function Page() {
Props
TooltipRail
| Name | Default | Description |
|---|---|---|
| items | — | RailItem[] The icons in the rail |
| side | "right" | "right" | "left" Which side the labels open towards |
| dark | false | boolean Render the dark palette |
RailItem (type)
| Name | Default | Description |
|---|---|---|
| id | — | string | number Stable key for the entry |
| label | — | string Tooltip text, also the icon's accessible name |
| icon | — | ReactNode Icon shown in the rail |