Tooltips in Web Components

[JaapWeijland]

Hi there,

I did the following:

npm i -s react-tooltip

I copied the example to a React application in a Web Component:

             <a className="block h-16 bg-red-300" data-tip data-for="happyFace" data-iscapture="true">
                {' '}
                d(`･∀･)b{' '}
            </a>
            <ReactTooltip place="bottom" id="happyFace" type="error" data-iscapture effect="solid">
                <span>Show happy face</span>
            </ReactTooltip>

But it does not work. Has this something to do with the fact that my React component is embedded in a Web Component / custom element in a shadow dom?

Edit: I just changed this.attachShadow({ mode: 'closed' }) to this.attachShadow({ mode: 'open' }), and this fixed the issue. Is there a way to make the tooltip work with the shadow root closed?

[flieks]

Is there a way to make this work without mode closed ? I am getting this error with trying tooltip in shadowDOM Cannot read properties of null (reading 'getBoundingClientRect')

[safirelauene]

I'm having this problem with latest version (5.11.1) even with this.attachShadow({ mode: 'open' })

[gabrieljablonski]

@safirelauene Please open a new issue with more details. If you could also provide a sample project reproducing the problem, it would help a lot.