seti-ramesesv1/dist/components/ui/Tooltip.js

Reusable components and context for Next.js apps

import { jsxs, jsx } from 'react/jsx-runtime';
import { clsx } from '../../node_modules/clsx/dist/clsx.js';
import { useState, useRef, useEffect } from 'react';
import styles from '../../styles/Tooltip.module.css.js';

const Tooltip = ({ content, children, position = "top", delay = 0, color = "dark" }) => {
    const [visible, setVisible] = useState(false);
    const [hoverTimer, setHoverTimer] = useState(null);
    const tooltipRef = useRef(null);
    const showTooltip = () => {
        const timer = setTimeout(() => setVisible(true), delay);
        setHoverTimer(timer);
    };
    const hideTooltip = () => {
        if (hoverTimer)
            clearTimeout(hoverTimer);
        setVisible(false);
    };
    useEffect(() => {
        return () => {
            if (hoverTimer)
                clearTimeout(hoverTimer);
        };
    }, [hoverTimer]);
    return (jsxs("div", { className: styles.wrapper, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, children: [children, visible && (jsx("div", { ref: tooltipRef, className: clsx(styles.tooltip, styles[color], styles[position]), children: content }))] }));
};

export { Tooltip, Tooltip as default };
//# sourceMappingURL=Tooltip.js.map