[Bug] Tooltips Do Not Work With ShadowDOMs

[DonIsaac]

Heyo,

My preact application uses a shadow dom as a mounting point, and tooltips are not appearing. I did some digging through the source code, and I believe I know why.

// ReactHint#toggleEvents, line 30
;(click || hasEvents) && document[action]('click', this.toggleHint)
;(focus || hasEvents) && document[action]('focusin', this.toggleHint)
;(hover || hasEvents) && document[action]('mouseover', this.toggleHint)
;(click || hover || hasEvents) && document[action]('touchend', this.toggleHint)

Events in the shadow dom are not propagated up to document, so toggleHint never fires.

One way that this could be fixed is by allowing users to specify the element where the ReactHint singleton should listen for events

[slmgc]

Thanks for reporting this! I'll try to fix this

[slmgc]

@DonIsaac could you also provide a simple repro?

[DonIsaac]

I can't use the codebase that I'm using as an example, but if I get time I'll upload a simple repro

[emilschutte]

A related issue is that tooltips don't work in a React portal in another browser window (due to this hard binding to the main window's document).

[slmgc]

@emilschutte hm, thanks for letting me know, could you provide a repro so I could try fixing that?

[emilschutte]

Let's see, not sure I remember exactly 😅 ... I think it was something like this:

https://codesandbox.io/s/react-fiddle-l7qdj?file=/src/App.js

[evgenyfadeev]

A related issue is that tooltips don't work in a React portal in another browser window (due to this hard binding to the main window's document).

I made it to work in the portal by adding a separate instance of <ReactHint /> in the root of the portal, however, the tooltips open in all instances of the <ReactHint /> and sometimes you can see more than one tooltips at the same time.