Trying to add a trigger to hide the tooltip with 'onMouseLeave' #894
Description
I am using react-tooltip in my app and just recently upgraded to v5. I have a section that uses HTML with a couple buttons in the tooltip. It looks like this on the page:
Each of those underlined numbers will cause the tooltip to show with the 2 buttons. I need the tooltip to stay open for the user to be able to click on a button. Initially, I tried adding the onMouseLeave onto the list element along with the onMouseEnter. But when I moved the mouse up to the buttons, the mouse went over another list element and triggered a new tooltip, so I could never click on a button. So then I thought I could add the onMouseLeave to the actual tooltip. I tried that and the immediate child div to no avail.
Here is my HTML for a list element:
<li
className={`${
invalidBatchNumbers.includes(b.BATCH_ID)
? 'invalid'
: 'valid'
}`}
key={i}
data-id={b.ID}
id={`batch-tip-${b.ID}`}
onMouseEnter={() => {
// in this example we only want to trigger the isOpen as true by one time
if (!isOpen) {
setAnchorId(`batch-tip-${b.ID}`);
setIsOpen(true);
}
}}
>
{b.BATCH_ID}
<Tooltip
className={'react-tooltip'}
clickable
delayShow={500}
effect={'solid'}
// anchorId={`batch-tip-${b.ID}`}
anchorId={anchorId}
isOpen={isOpen}
offset={-13}
>
<div onMouseLeave={() => {
console.log('left the Tooltip element!');
// setAnchorId('');
// setIsOpen(false);
}}>
<button
className={'btn btn-danger m-1'}
data-id={`btn-${b.ID}`}
data-number={`btn-${b.BATCH_ID}`}
onClick={abortBatchClick}
>
Abort
</button>
<button
className={'btn btn-danger m-1'}
data-id={`btn-${b.ID}`}
data-number={`btn-${b.BATCH_ID}`}
onClick={deleteBatchClick}
>
Delete
</button>
</div>
</Tooltip>
</li>So I want the tooltip to stay open until the mouse leaves the tooltip. How can I achieve this?