"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

type TooltipSide = "top" | "right" | "bottom" | "left";

const positionStyles: Record<
  TooltipSide,
  { container: string; arrow: string }
> = {
  top: {
    container: "bottom-full left-1/2 -translate-x-1/2 -translate-y-2",
    arrow: "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2",
  },
  right: {
    container: "left-full top-1/2 -translate-y-1/2 translate-x-2",
    arrow: "left-0 top-1/2 -translate-x-1/2 -translate-y-1/2",
  },
  bottom: {
    container: "top-full left-1/2 -translate-x-1/2 translate-y-2",
    arrow: "top-0 left-1/2 -translate-x-1/2 -translate-y-1/2",
  },
  left: {
    container: "right-full top-1/2 -translate-y-1/2 -translate-x-2",
    arrow: "right-0 top-1/2 translate-x-1/2 -translate-y-1/2",
  },
};

export interface TooltipFancyProps {
  content: React.ReactNode;
  side?: TooltipSide;
  delay?: number;
  className?: string;
  children: React.ReactNode;
}

export function TooltipFancy({
  content,
  side = "top",
  delay = 200,
  className,
  children,
}: TooltipFancyProps) {
  const [open, setOpen] = React.useState(false);
  const timerRef = React.useRef<number | null>(null);

  const handleOpen = React.useCallback(() => {
    if (timerRef.current) {
      window.clearTimeout(timerRef.current);
    }
    timerRef.current = window.setTimeout(() => setOpen(true), delay);
  }, [delay]);

  const handleClose = React.useCallback(() => {
    if (timerRef.current) {
      window.clearTimeout(timerRef.current);
    }
    setOpen(false);
  }, []);

  React.useEffect(() => {
    return () => {
      if (timerRef.current) {
        window.clearTimeout(timerRef.current);
      }
    };
  }, []);

  return (
    <span
      className={cn("relative inline-flex", className)}
      onMouseEnter={handleOpen}
      onMouseLeave={handleClose}
      onFocus={handleOpen}
      onBlur={handleClose}
    >
      {children}
      {open ? (
        <span
          role="tooltip"
          className={cn(
            "pointer-events-none absolute z-40 w-64 rounded-lg border border-border bg-card p-3 text-sm text-foreground shadow-lg",
            positionStyles[side].container
          )}
        >
          <span
            className={cn(
              "absolute h-3 w-3 rotate-45 border border-border bg-card",
              positionStyles[side].arrow
            )}
          />
          {content}
        </span>
      ) : null}
    </span>
  );
}
Tooltip Fancy

Dependencies

Files

Installation
