# All files / src/components/ui tooltip.tsx

0% Statements 0/11
0% Branches 0/11
0% Functions 0/2
0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64

     "use client";

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

    interface TooltipProps {
      content?: React.ReactNode;
      children: React.ReactNode;
      side?: "right" | "left" | "top" | "bottom";
      className?: string;
      disabled?: boolean;
    }

    export function Tooltip({ content, children, side = "right", className, disabled }: TooltipProps) {
      // If no content prop is provided, assume children are using the Provider/Trigger/Content pattern
      if (!content) {
        return <>{children}</>;
      }

      if (disabled) return <>{children}</>;

      const position =
        side === "right"
          ? "left-full ml-2 top-1/2 -translate-y-1/2"
          : side === "left"
            ? "right-full mr-2 top-1/2 -translate-y-1/2"
            : side === "top"
              ? "bottom-full mb-2 left-1/2 -translate-x-1/2"
              : "top-full mt-2 left-1/2 -translate-x-1/2";

      return (
        <div className={cn("relative group inline-flex", className)}>
          {children}
          <div
            className={cn(
              "pointer-events-none invisible group-hover:visible absolute z-50 whitespace-nowrap rounded bg-gray-900 px-2 py-1 text-xs text-white shadow-lg transition-opacity",
              position
            )}
            role="tooltip"
          >
            {content}
          </div>
        </div>
      );
    }

    // Export aliases for compatibility with shadcn/ui patterns
    export const TooltipProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;
    export const TooltipTrigger = React.forwardRef<HTMLDivElement, { children: React.ReactNode; asChild?: boolean; className?: string }>(
      ({ children, asChild, className }, ref) => {
        if (asChild) {
          return <>{children}</>;
        }
        return <div ref={ref} className={className}>{children}</div>;
      }
    );
    TooltipTrigger.displayName = "TooltipTrigger";

    export const TooltipContent = ({ children, className }: { children: React.ReactNode; className?: string }) => (
      <div className={cn("absolute z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md", className)}>
        {children}
      </div>
    );