plane/web/components/ui/tooltip.tsx

import React from "react";

// next-themes
import { useTheme } from "next-themes";
// tooltip2
import { Tooltip2 } from "@blueprintjs/popover2";

type Props = {
  tooltipHeading?: string;
  tooltipContent: string | React.ReactNode;
  position?:
    | "top"
    | "right"
    | "bottom"
    | "left"
    | "auto"
    | "auto-end"
    | "auto-start"
    | "bottom-left"
    | "bottom-right"
    | "left-bottom"
    | "left-top"
    | "right-bottom"
    | "right-top"
    | "top-left"
    | "top-right";
  children: JSX.Element;
  disabled?: boolean;
  className?: string;
  openDelay?: number;
  closeDelay?: number;
};

export const Tooltip: React.FC<Props> = ({
  tooltipHeading,
  tooltipContent,
  position = "top",
  children,
  disabled = false,
  className = "",
  openDelay = 200,
  closeDelay,
}) => {
  const { theme } = useTheme();

  return (
    <Tooltip2
      disabled={disabled}
      hoverOpenDelay={openDelay}
      hoverCloseDelay={closeDelay}
      content={
        <div
          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
            theme === "custom"
              ? "bg-custom-background-100 text-custom-text-200"
              : "bg-black text-gray-400"
          } break-words overflow-hidden ${className}`}
        >
          {tooltipHeading && (
            <h5
              className={`font-medium ${
                theme === "custom" ? "text-custom-text-100" : "text-white"
              }`}
            >
              {tooltipHeading}
            </h5>
          )}
          {tooltipContent}
        </div>
      }
      position={position}
      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
        React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
      }
    />
  );
};