REACT onMouseEnter/onMouseLeave PopUp flickering loop

Question

I'm building a button that shows a PopUp when hovered. To achieve this, I'm using the state "activeToolTip" that turns true "onMouseEnter" / false "onMouseLeave", and in turn renders the PopUp ({activeToolTip ? ( <>popUp<> : null)).

However, when hovering the button, the PopUp flickers between the onMouseEnter and onMouseLeave.

Can you help me understand the problem?

My code:

import { TooltipClose } from "../../../utils/svg";

export default function CustomTooltipsRed() {

    const [activeToolTip, setActiveToolTip] = useState(false);
    let TooltipTimeout;


    const showToolTip = () => {
        TooltipTimeout = setTimeout(() => {
            setActiveToolTip(true);
        }, 50);
    };


    const hideToolTip = () => {
        setActiveToolTip(false);
        clearInterval(TooltipTimeout);
    };

    return (

        <div className="flex items-center justify-center ">
            <button
                className="bg-pink-500 text-white font-bold uppercase text-sm px-6 py-3 rounded shadow mr-1 mb-1 "
                onMouseEnter={() => showToolTip()}
                onMouseLeave={() => hideToolTip()}
            >
                Hover button
            </button>

            {activeToolTip ? (
                <>
                    <div className="justify-center items-center flex fixed inset-0 outline-none focus:outline-none ">
                        <div className="relative w-auto my-6 mx-auto max-w-xl">
                            {/*content*/}
                            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-[#F43F5E] outline-none">
                                {/*header*/}
                                <div className="flex items-center justify-start p-2 rounded-t">
                                    <div className="mr-2">
                                        <i><TooltipClose /></i>
                                    </div>
                                    <h3 className="text-base font-semibold text-white">
                                        P1 - Priority Issue
                                    </h3>
                                </div>
                                {/*body*/}
                                <div className="relative p-6 flex-auto bg-[#1E293B] rounded-b-lg">
                                    <p className="text-[#E2E8F0] leading-relaxed">
                                        We have detected that your tenant has legacy protocols enabled.
                                        Why is this an issue? Legacy protocols can not enforce multi factor
                                        authentication and are considered a security risk.
                                    </p>
                                    <a href="/" className="text-[#E2E8F0] text-xs">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="inset-0 z-40"></div>
                </>
            ) : null}
        </div >
    );
}

Answer 1

Add pointer-events-none to the tooltip.