"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; import { Folder, File } from "lucide-react"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; export type TreeNode = { id: string; name: string; tooltip?: string; type: "folder" | "file"; children?: TreeNode[]; }; const demoData: TreeNode[] = [ { id: "1", name: "src", tooltip: "src", type: "folder", children: [ { id: "2", name: "components", tooltip: "components", type: "folder", children: [ { id: "3", name: "Button.tsx", tooltip: "Button's tooltip", type: "file", }, { id: "4", name: "Card.tsx", tooltip: "Card's tooltip", type: "file", }, ], }, { id: "5", name: "lib", tooltip: "lib", type: "folder", children: [ { id: "6", name: "utils.ts", tooltip: "utils's tooltip", type: "file", }, ], }, ], }, ]; export function TreeNodeTooltip({ node }: { node: TreeNode }) { const [expanded, setExpanded] = useState(false); const isFolder = node.type === "folder"; const toggle = () => { if (isFolder) setExpanded((prev) => !prev); }; return (

{node.tooltip} {/* Animate children */} {isFolder && ( {expanded && ( {node.children?.map((child) => ( ))} )} )}

); }

Tree Node Tooltip

Tooltip Support: Each node can have custom tooltip text
Expandable Structure: Folders can be expanded/collapsed
Smooth Animations: Framer Motion powered transitions
Hover Effects: Visual feedback on hover
File/Folder Icons: Clear visual distinction
Nested Structure: Supports deeply nested hierarchies
Demo Data: Includes sample tree structure

Installation

Props

Features