plane/apps/app/components/ui/tooltip.tsx

import React from "react";

import { Tooltip2 } from "@blueprintjs/popover2";

type Props = {
  tooltipHeading?: string;
  tooltipContent: string;
  position?: "top" | "right" | "bottom" | "left";
  children: JSX.Element;
  disabled?: boolean;
};

export const Tooltip: React.FC<Props> = ({
  tooltipHeading,
  tooltipContent,
  position = "top",
  children,
  disabled = false,
}) => (
  <Tooltip2
    disabled={disabled}
    content={
      <div className="flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md bg-white p-2 shadow-md capitalize text-left">
        {tooltipHeading ? (
          <>
            <h5 className="font-medium">{tooltipHeading}</h5>
            <p className="text-gray-700">{tooltipContent}</p>
          </>
        ) : (
          <p className="text-gray-700">{tooltipContent}</p>
        )}
      </div>
    }
    position={position}
    renderTarget={({ isOpen: isTooltipOpen, ref: eleRefernce, ...tooltipProps }) =>
      React.cloneElement(children, { ref: eleRefernce, ...tooltipProps, ...children.props })
    }
  />
);