react-tooltip: [BUG] ReactTooltip isn't being rendered in Shadow DOM mode

Describe the bug My React app is being rendered in a Shadow DOM, ReactTooltip isn’t working. If I’m disabling the Shadow DOM mode, it’s working as expected.

Version of Package v5.13.1

To Reproduce

App.tsx

import { Tooltip as ReactTooltip } from 'react-tooltip';
import { StyledDiv } from './styles';

export const App = () => {
	return (
		<StyledDiv>
			<ReactTooltip
				id={`my-tooltip`}
				style={{ zIndex: 100, maxWidth: 300, fontSize: 13 }}
			/>
		</StyledDiv>
	);
};

index.tsx

const shadowRoot = document.body.attachShadow({ mode: 'open' });
	
// create a root inside the shadow
const root = ReactDOM.createRoot(shadowRoot);

// Render the new widget
root.render(<App />);

Expected behavior Placeholder element should appear in the dom. Tooltips should work.

Desktop (please complete the following information if possible or delete this section):

OS: MacOS
Browser Chrome
Version latest
Frameworks React 18.2.0, Next.js 13.1.1

About this issue

Original URL
State: open
Created a year ago
Reactions: 3
Comments: 25 (12 by maintainers)

Most upvoted comments

Hey @danielbarion @dsternlicht

I got some insight regarding this issue, we faced the same problems and wanted to make it work so I had a look in the code to see if I could do something and I was able to make some use cases work pretty well (especially on the hover part, but need help on the onClick stuff)

https://github.com/ReactTooltip/react-tooltip/pull/1068

I was focusing on making it work so the code isn’t exactly proper but I think it deserves improvement and a some help to make it work just fine.

Overall I’m stuck on making some use cases work, especially the onClick one, I think some “addEventListener” should be done on the Shadow Dom instead of the window in the TooltipController.tsx but I wasn’t able to fully dig into every part of the code and my tries to make it work were unsuccessful today (even with dirty code)

I will have some extra look this week, but if you guys think about anything lmk !

Thanks

quentin-benyahia on Jul 26, 2023

It’s more of a POC for now, but I think overall I’ll follow the same idea, I’ll wait for a review just to make sure the ideas make sense, cause I was thinking that maybe a few parts could be done differently, then make it prod ready (remove useless comments, factorize some stuff …etc)

Thanks !

quentin-benyahia on Jul 27, 2023

@dsternlicht Sorry, I thought I updated this conv but it seems like I’ve only commented on the PR (https://github.com/ReactTooltip/react-tooltip/pull/1068), I wasn’t able to make the proper fix on a PR because I lack of time on this topic, I had to fork and adapt the package to make it work in our use cases only.

quentin-benyahia on Oct 25, 2023

@dsternlicht thanks, we will take a look as soon as possible.

danielbarion on May 25, 2023