4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 51:T16f6,"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; export const Tooltip = ({ content, children, containerClassName, }: { content: string | React.ReactNode; children: React.ReactNode; containerClassName?: string; }) => { const [isVisible, setIsVisible] = useState(false); const [mouse, setMouse] = useState<{ x: number; y: number }>({ x: 0, y: 0 }); const [height, setHeight] = useState(0); const [position, setPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0, }); const contentRef = useRef(null); const containerRef = useRef(null); useEffect(() => { if (isVisible && contentRef.current) { setHeight(contentRef.current.scrollHeight); } }, [isVisible, content]); const calculatePosition = (mouseX: number, mouseY: number) => { if (!contentRef.current || !containerRef.current) return { x: mouseX + 12, y: mouseY + 12 }; const tooltip = contentRef.current; const container = containerRef.current; const containerRect = container.getBoundingClientRect(); const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; // Get tooltip dimensions const tooltipWidth = 240; // min-w-[15rem] = 240px const tooltipHeight = tooltip.scrollHeight; // Calculate absolute position relative to viewport const absoluteX = containerRect.left + mouseX; const absoluteY = containerRect.top + mouseY; let finalX = mouseX + 12; let finalY = mouseY + 12; // Check if tooltip goes beyond right edge if (absoluteX + 12 + tooltipWidth > viewportWidth) { finalX = mouseX - tooltipWidth - 12; } // Check if tooltip goes beyond left edge if (absoluteX + finalX < 0) { finalX = -containerRect.left + 12; } // Check if tooltip goes beyond bottom edge if (absoluteY + 12 + tooltipHeight > viewportHeight) { finalY = mouseY - tooltipHeight - 12; } // Check if tooltip goes beyond top edge if (absoluteY + finalY < 0) { finalY = -containerRect.top + 12; } return { x: finalX, y: finalY }; }; const updateMousePosition = (mouseX: number, mouseY: number) => { setMouse({ x: mouseX, y: mouseY }); const newPosition = calculatePosition(mouseX, mouseY); setPosition(newPosition); }; const handleMouseEnter = (e: React.MouseEvent) => { setIsVisible(true); const rect = e.currentTarget.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; updateMousePosition(mouseX, mouseY); }; const handleMouseLeave = () => { setMouse({ x: 0, y: 0 }); setPosition({ x: 0, y: 0 }); setIsVisible(false); }; const handleMouseMove = (e: React.MouseEvent) => { if (!isVisible) return; const rect = e.currentTarget.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; updateMousePosition(mouseX, mouseY); }; const handleTouchStart = (e: React.TouchEvent) => { const touch = e.touches[0]; const rect = e.currentTarget.getBoundingClientRect(); const mouseX = touch.clientX - rect.left; const mouseY = touch.clientY - rect.top; updateMousePosition(mouseX, mouseY); setIsVisible(true); }; const handleTouchEnd = () => { // Delay hiding to allow for tap interaction setTimeout(() => { setIsVisible(false); setMouse({ x: 0, y: 0 }); setPosition({ x: 0, y: 0 }); }, 2000); }; const handleClick = (e: React.MouseEvent) => { // Toggle visibility on click for mobile devices if (window.matchMedia("(hover: none)").matches) { e.preventDefault(); if (isVisible) { setIsVisible(false); setMouse({ x: 0, y: 0 }); setPosition({ x: 0, y: 0 }); } else { const rect = e.currentTarget.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; updateMousePosition(mouseX, mouseY); setIsVisible(true); } } }; // Update position when tooltip becomes visible or content changes useEffect(() => { if (isVisible && contentRef.current) { const newPosition = calculatePosition(mouse.x, mouse.y); setPosition(newPosition); } }, [isVisible, height, mouse.x, mouse.y]); return (

{children} {isVisible && (

{content}

)}

); }; 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.aceternity.com/registry/tooltip-card.json","proxyUrl":"https://shadcnregistry.com/r/aceternity/tooltip-card","itemId":"@aceternity/tooltip-card"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"components/ui/tooltip-card.tsx","content":"$51","type":"registry:ui","target":"components/ui/tooltip-card.tsx"}]}]]}],"$L52"]}]

Tooltip Card

Installation

Files

components

Styles