forked from github/plane
35a7d10b8f
* chore: swap input component with plane/ui package * chore: swap textarea component with plane/ui package * chore: swap button component with plane/ui package * chore: button component revamp * fix: button type fix * chore: secondary button revamp * chore: button props updated * chore: swap loader component with plane/ui package * fix: build error fix * chore: button component refactor * chore: code refactor * chore: swap toggle switch component with plane/ui package * chore: swap spinner component with plane/ui package * chore: swap progress bar componenet with plan/ui package * chore: code refactor
78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
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 })
|
|
}
|
|
/>
|
|
);
|
|
};
|