CODEWITHSUNDEEP
reactjsreact-scriptsreact-tooltipreact-simple-maps
Ken Ryan
Ken Ryan

Reputation: 549

React Tooltip doesn't close on mouse leave

I have created this map with react-simple-maps and react-tooltip. I forked from a project but my ideal scenario here is

On click of the state, the tooltip shows up, but on mouse leave, the tooltip won't disappear. Instead, it stays there, and if. you hover over another state, the info changes on the tooltip but it doesn't move to the new hovered state.

Here is a sandbox link https://codesandbox.io/s/tsdw84

Thanks for the help in advance!!

Upvotes: 0

Views: 2572

Answers (2)

Tee
Tee

Reputation: 154

@Hafiz proposed a simple answer to a (similar post). Sharing here in case anyone lands on this post and hasn't found that one.

Removing

<React.StrictMode>
    
</React.StrictMode>

from index.js solved the problem for me.

It's unclear why this worked -- I didn't have any warnings in my console from StrictMode. I have a comment asking for clarification in that other post, and I'll update here if I receive a response.

The OP from that other post also appeared to solve the problem with a combination of useState, onMouseEnter, and onMouseLeave within the element that binds the tooltip.

Upvotes: 1

Zek&#39;i B. Ulu
Zek&#39;i B. Ulu

Reputation: 87

I have solved it by

function Example(){ 
const [isToolTipMounted, setIsToolTipMounted] = useState<boolean>(false);  
return(
<p 
data-for={"infoTip"} 
data-tip="React-tooltip"
onMouseEnter={handleMouseEnter}                             
onMouseLeave={handleMouseLeave}>TEST</p>
{isToolTipMounted && <ReactTooltip id={"infoTip"}/>}
)  
}

Upvotes: 1

Related Questions