React-tooltip: 4.2.11 no longer adds global __react_component_tooltip style

[patricekaufmann]

The project I use this on has 2 entry points and it works for one entry point while it does not work for the other one. It used to work for both. The global style tag is missing, containing

border-radius: 3px; display: inline-block; font-size: 13px; left: -999em; opacity: 0; padding: 8px 21px; position: fixed; pointer-events: none; transition: opacity 0.3s ease-out; top: -999em; visibility: hidden; z-index: 999;

It happens only in 4.2.11, still working in 4.2.10.

[gajus]

If anyone runs into this while using next.js, just adding https://github.com/wwayne/react-tooltip/blob/master/src/index.scss to your global styles fixes the issue.

[sumthief]

Hey

I think my previous PR could broke this functionality.

I tried to fix it (looks like condition for host is unnecessary)

Checked on different apps:

• Clean CRA app
• Clean CRA app with tooltip rendered in Shadow DOM
• App inside iframe
• App inside Custom Element
• App inside Custom Element with Shadow DOM

Please could someone check this fix and give feedback about it?

[gjvoosten]

@sumthief That doesn't appear to fix it for us: still shows a black line at the top of the content block (where the tooltip container is), shows the tooltip at the top of the content block instead of where it should be, and the tooltip also no longer hides itself. None of this is the case with 4.2.10.

[sumthief]

Okay, It was blind try to fix it and it doesn't work 🙁

Can someone provide minimal repository for reproducing this issue?

[BoresXP]

This happened for me too.
Let's see why it happens. injectStyles should do the trick but it doesn't because domRoots is empty.
This happens because getTargetArray returns empty array here.
getTargetArray searches for any element having data-tip attribute and data-for with id of current tooltip (or no data-for if tooltip has no id). If there are no such element in DOM (you add them dynamically for example) default styles will never be inserted because injectStyles is called only once from componentDidMount.
Solution here will be simple: fallback do nearest head section to tooltip itself if no elements with data-tip exists.

[laurenz-glueck]

Will this issue be fixed anytime soon?

[gjvoosten]

I can confirm that release 4.2.14 does indeed fix this issue. :+1: