import React from "react"; import { useTheme } from "next-themes"; 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 = ({ tooltipHeading, tooltipContent, position = "top", children, disabled = false, className = "", openDelay = 200, closeDelay, }) => { const { theme } = useTheme(); return ( {tooltipHeading && (
{tooltipHeading}
)} {tooltipContent} } position={position} renderTarget={({ ref: eleReference, ...tooltipProps }) => React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props }) } /> ); };