"use client" import * as React from "react" import { cn } from "@/lib/utils" interface HoverCardContextValue { open: boolean onOpenChange: (open: boolean) => void triggerRef: React.RefObject } const HoverCardContext = React.createContext({ open: false, onOpenChange: () => {}, triggerRef: { current: null }, }) interface HoverCardProps { open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void openDelay?: number closeDelay?: number children: React.ReactNode } const HoverCard = ({ open: controlledOpen, defaultOpen = false, onOpenChange, openDelay = 200, closeDelay = 300, children, }: HoverCardProps) => { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) const isControlled = controlledOpen !== undefined const open = isControlled ? controlledOpen : uncontrolledOpen const triggerRef = React.useRef(null) const openTimerRef = React.useRef>(undefined) const closeTimerRef = React.useRef>(undefined) const handleOpenChange = React.useCallback( (value: boolean) => { if (!isControlled) { setUncontrolledOpen(value) } onOpenChange?.(value) }, [isControlled, onOpenChange] ) const handleOpen = React.useCallback(() => { if (closeTimerRef.current) clearTimeout(closeTimerRef.current) openTimerRef.current = setTimeout(() => handleOpenChange(true), openDelay) }, [openDelay, handleOpenChange]) const handleClose = React.useCallback(() => { if (openTimerRef.current) clearTimeout(openTimerRef.current) closeTimerRef.current = setTimeout(() => handleOpenChange(false), closeDelay) }, [closeDelay, handleOpenChange]) React.useEffect(() => { return () => { if (openTimerRef.current) clearTimeout(openTimerRef.current) if (closeTimerRef.current) clearTimeout(closeTimerRef.current) } }, []) return (

{children}

) } HoverCard.displayName = "HoverCard" const HoverCardTrigger = React.forwardRef< HTMLAnchorElement, React.AnchorHTMLAttributes >(({ className, ...props }, ref) => { const { triggerRef } = React.useContext(HoverCardContext) return ( { triggerRef.current = node if (typeof ref === "function") ref(node) else if (ref) ref.current = node }} className={cn("inline-block", className)} {...props} /> ) }) HoverCardTrigger.displayName = "HoverCardTrigger" const HoverCardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { align?: "start" | "center" | "end" sideOffset?: number } >(({ className, align = "center", sideOffset = 4, ...props }, ref) => { const { open, triggerRef } = React.useContext(HoverCardContext) const contentRef = React.useRef(null) const [position, setPosition] = React.useState<{ top: number; left: number }>({ top: 0, left: 0 }) React.useEffect(() => { if (!open || !triggerRef.current || !contentRef.current) return const triggerRect = triggerRef.current.getBoundingClientRect() const contentRect = contentRef.current.getBoundingClientRect() let left: number if (align === "start") { left = triggerRect.left } else if (align === "end") { left = triggerRect.right - contentRect.width } else { left = triggerRect.left + (triggerRect.width - contentRect.width) / 2 } left = Math.max(8, Math.min(left, window.innerWidth - contentRect.width - 8)) const top = triggerRect.bottom + sideOffset setPosition({ top, left }) }, [open, align, sideOffset, triggerRef]) if (!open) return null return (

{ (contentRef as React.MutableRefObject).current = node if (typeof ref === "function") ref(node) else if (ref) ref.current = node }} className={cn( "fixed z-50 w-64 rounded-xl border border-[var(--color-border)] bg-[var(--color-popover)] p-4 shadow-lg", "animate-in fade-in-0 zoom-in-95", className )} style={{ top: `${position.top}px`, left: `${position.left}px` }} {...props} /> ) }) HoverCardContent.displayName = "HoverCardContent" export { HoverCard, HoverCardTrigger, HoverCardContent }

Hover Card

Live-Demo

Quellcode