forked from github/plane
74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
|
|
export type Props = {
|
|
direction?: "top" | "right" | "bottom" | "left";
|
|
content: string | React.ReactNode;
|
|
margin?: string;
|
|
children: React.ReactNode;
|
|
customStyle?: string;
|
|
};
|
|
|
|
const Tooltip: React.FC<Props> = ({
|
|
content,
|
|
direction = "top",
|
|
children,
|
|
margin = "24px",
|
|
customStyle,
|
|
}) => {
|
|
const [active, setActive] = useState(false);
|
|
const [styleConfig, setStyleConfig] = useState("top-[calc(-100%-24px)]");
|
|
let timeout: any;
|
|
|
|
const showToolTip = () => {
|
|
timeout = setTimeout(() => {
|
|
setActive(true);
|
|
}, 300);
|
|
};
|
|
|
|
const hideToolTip = () => {
|
|
clearInterval(timeout);
|
|
setActive(false);
|
|
};
|
|
|
|
const tooltipStyles = {
|
|
top: `
|
|
left-[50%] translate-x-[-50%] before:contents-[""] before:border-solid
|
|
before:border-transparent before:h-0 before:w-0 before:absolute before:pointer-events-none
|
|
before:border-[6px] before:left-[50%] before:ml-[calc(6px*-1)] before:top-full before:border-t-black`,
|
|
|
|
right: `
|
|
right-[-100%] top-[50%]
|
|
translate-x-0 translate-y-[-50%] `,
|
|
|
|
bottom: `
|
|
left-[50%] translate-x-[-50%] before:contents-[""] before:border-solid
|
|
before:border-transparent before:h-0 before:w-0 before:absolute before:pointer-events-none
|
|
before:border-[6px] before:left-[50%] before:ml-[calc(6px*-1)] before:bottom-full before:border-b-black`,
|
|
|
|
left: `
|
|
left-[-100%] top-[50%]
|
|
translate-x-0 translate-y-[-50%] `,
|
|
};
|
|
|
|
useEffect(() => {
|
|
const styleConfig = direction + "-[calc(-100%-" + margin + ")]";
|
|
setStyleConfig(styleConfig);
|
|
}, [margin, direction]);
|
|
|
|
return (
|
|
<div className="inline-block relative" onMouseEnter={showToolTip} onMouseLeave={hideToolTip}>
|
|
{children}
|
|
{active && (
|
|
<div
|
|
className={`absolute p-[6px] text-xs z-20 rounded leading-1 text-white bg-black text-center w-max max-w-[300px]
|
|
${tooltipStyles[direction]} ${customStyle ? customStyle : ""} ${styleConfig}`}
|
|
>
|
|
{content}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Tooltip;
|