0

I have a React menu item that should surface a subcomponent on hover. When that subcomponent info-icon is hovered, a tooltip should pop open. which looks like this:

enter image description here

Here is the component:

const TestFunc = (props) => {
const { icon, label, data } = props;
const [hovering, setState] = useState(false);

return (
    <div className="menu-item" onMouseOver={() => setState(true)} onMouseOut={() => setState(false)}>
        <div className="menu-item-element">
            <div className="sub-menu-item-element">{icon}</div>
            <div className="sub-menu-item-element">{label}</div>
        </div>
        {hovering ?
            <Tooltip
                id="base"
                align="top"
                content={data.tooltipContent}
                variant="learnMore"
                className="menu-item-element"
                position="overflowBoundaryElement"
            />
            : null
        }
    </div>
);

But when I hover over the info icon, this triggers the mouseOut function then the icon disappears, which then triggers the mouseOver function and it just loops like that with the info icon flashing over and over.

How do I fix this?

codemon
  • 1,456
  • 1
  • 14
  • 26
  • 1
    Possible duplicate of [Image flickering issue in React when image is conditionally rendered](https://stackoverflow.com/questions/41218108/image-flickering-issue-in-react-when-image-is-conditionally-rendered) – GalAbra Jun 19 '19 at 19:35
  • Possible duplicate of https://stackoverflow.com/questions/4258615/what-is-the-difference-between-jquerys-mouseout-and-mouseleave – ControlAltDel Jun 19 '19 at 19:38

1 Answers1

2

In the icon use onMouseLeave instead to prevent bubble to parent. Or e.stopPropagation()

Dupocas
  • 20,285
  • 6
  • 38
  • 56
  • 1
    Wow that worked, not on the icon, I just changed it on the parent div like I had it. If you could explain a bit why that works I can accept your answer. – codemon Jun 19 '19 at 19:51