47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import cx from 'clsx';
|
|
import { ReactNode, useRef, useState } from 'react';
|
|
import { CSSTransition } from 'react-transition-group';
|
|
import styles from './Tooltip.module.css';
|
|
|
|
interface TooltipProps {
|
|
content: ReactNode;
|
|
position?: 'top' | 'bottom' | 'left' | 'right';
|
|
children?: ReactNode;
|
|
}
|
|
|
|
const positionMap = {
|
|
top: styles.top,
|
|
bottom: styles.bottom,
|
|
left: styles.left,
|
|
right: styles.right,
|
|
};
|
|
|
|
export function Tooltip({ content, position = 'top', children }: TooltipProps) {
|
|
const [show, setShow] = useState(false);
|
|
const contentRef = useRef<HTMLDivElement>();
|
|
|
|
return (
|
|
<div
|
|
className={styles.tooltip_container}
|
|
onMouseEnter={() => setShow(true)}
|
|
onMouseLeave={() => setShow(false)}>
|
|
{children}
|
|
<CSSTransition
|
|
nodeRef={contentRef}
|
|
in={show}
|
|
unmountOnExit
|
|
classNames={{
|
|
enter: styles.fade_enter,
|
|
enterActive: styles.fade_enter_active,
|
|
exit: styles.fade_exit,
|
|
exitActive: styles.fade_exit_active,
|
|
}}
|
|
timeout={200}>
|
|
<div className={cx(styles.tooltip, positionMap[position])} ref={contentRef}>
|
|
{content}
|
|
</div>
|
|
</CSSTransition>
|
|
</div>
|
|
);
|
|
}
|