48 lines
1.0 KiB
TypeScript
48 lines
1.0 KiB
TypeScript
import { h } from 'preact';
|
|
import clsx from 'clsx';
|
|
import styles from './tooltip.module.css';
|
|
import { useEffect } from 'preact/hooks';
|
|
|
|
type Props = {
|
|
children: preact.ComponentChild;
|
|
className?: string;
|
|
content?: preact.ComponentChild;
|
|
permanent?: boolean;
|
|
position: 'top-left' | 'top-right';
|
|
hideBehavior?: 'mouseleave' | 'click';
|
|
hideTimeout?: number;
|
|
onHide?(): void;
|
|
};
|
|
|
|
export function Tooltip({
|
|
className,
|
|
children,
|
|
content,
|
|
permanent,
|
|
hideBehavior,
|
|
hideTimeout,
|
|
position,
|
|
onHide,
|
|
}: Props) {
|
|
useEffect(() => {
|
|
if (content && hideTimeout && onHide) {
|
|
setTimeout(onHide, hideTimeout);
|
|
}
|
|
}, [content, hideTimeout, onHide]);
|
|
|
|
return (
|
|
<div className={clsx(styles.root, className)}>
|
|
{content && (
|
|
<div
|
|
role="tooltip"
|
|
className={clsx(styles.tooltip, permanent && styles.tooltipPermanent, styles[position])}
|
|
onMouseLeave={hideBehavior === 'mouseleave' ? onHide : undefined}
|
|
>
|
|
{content}
|
|
</div>
|
|
)}
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|