Trying to add a trigger to hide the tooltip with 'onMouseLeave'

[mdodge-ecgrow]

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?

[gabrieljablonski]

Can you try without controlling the tooltip state (remove isOpen prop) and adding the following style to the tooltip:

<Tooltip style={{ pointerEvents: 'auto' }} />

Even if this works or not, either way we should probably have a clickable prop which allows for interacting with the tooltip, and keeping it open while still hovering it, similar to how it worked in v4.

I believe your use case is common enough that it should be possible to achieve just with the clickable prop, no need to control the tooltip state manually.

I'll probably work on that soon.

[mdodge-ecgrow]

Wow! That was the quickest response I've ever had when posting an issue/question in a Github library. Thank you for the quick response! And yes, that did work perfectly for me. I can now mouse over the tooltip and click on the two buttons. Thank you so much for you work on this library.

[gabrieljablonski]

No problem, I don't maintain many other projects so it's easier to be on watch for the new issues.

Glad I could help.

[danielbarion]

@mdodge-ecgrow do not forget to give a star to the project 😄

[mdodge-ecgrow]

@mdodge-ecgrow do not forget to give a star to the project 😄

Thanks for the reminder, I never think to do that. It is done.