Nested elements with tooltip

[eugenest]

Hi!

I have 2 divs with tooltips

<div data-tip={tooltipContent1}>
    <div data-tip={tooltipContent2}/>
</div>

but when I move cursor from child div to parent div tooltip data doesn't change

this is how it looks: https://prnt.sc/10h83bt

reproducible demo: https://codesandbox.io/s/react-tooltip-example-3116-forked-kh0oy

is there a way to solve this?

[dmikester1]

I am encountering basically the exact same issue. The only difference is that I am using the solid effect to keep the tooltip stationary. So I when I move back to the parent element, the tooltip doesn't show up at all.

[dmikester1]

Just thinking aloud here. I feel like I need to add a 'onMouseLeave' event to the child component. Because there is no trigger to show the tooltip again because the mouse is still in the parent and is not re-entering the parent to trigger the tooltip to show again. But I don't know what I would put in that 'onMouseLeave' event.

[dmikester1]

OK, I just figured this out!! This is one way to do it, maybe not the best way, but it works. I had to create two seperate ReactTooltip's and give them each an id. Then I attached a ref to the parent container and passed that ref down to the child. Then in the child, I added onMouseLeave and onMouseEnter functions to show and hide the parent's tooltip.

Here is all the code for my child component:

const SdsDownloadButton = (props) => {
	const { product, productRef } = props;

	return (
		<div>
			<FontAwesomeIcon
				className={'SDS-download'}
				icon={faLongArrowDown}
				size={'2x'}
				data-tip={'Click to download'}
				data-for={'download-tip'}
				onClick={(e) => downloadPDF(e, product)}
				onMouseLeave={() => {
					ReactTooltip.show(productRef.current);
				}}
				onMouseEnter={() => {
					ReactTooltip.hide(productRef.current);
				}}
			/>
			<ReactTooltip
				id={'download-tip'}
				effect={'solid'}
				type={'info'}
			/>
		</div>
	);
};

And the parent div tag:

<div
		ref={productLink}
		className={'product d-flex'}
		key={product.id}
		onClick={() => openPDF(product.name)}
		data-tip={'Click to view'}
		data-for={'view-tip'}
>

[XDSeverussnape]

How i can use ReactTooltip.show(productRef.current); and ReactTooltip.hide(productRef.current); in "react-tooltip": "^5.26.4", Because my nested div element doesn't work correctly.

[gabrieljablonski]

How i can use ReactTooltip.show(productRef.current); and ReactTooltip.hide(productRef.current); in "react-tooltip": "^5.26.4", Because my nested div element doesn't work correctly.

@XDSeverussnape please open a new issue with some more details, and possibly with sample code to reproduce your problem.