React-tooltip: Incorrect positioning on mobile using effect='solid'

[levymoreira]

Code:

<button data-tip='bla bla bla blbllblb lbalballbl blaba bla bal bal'>'Test'</button>
<ReactTooltip effect='solid' place='bottom' event='click' />

The current mobile result:

Expected result (Centered tooltip):

PS: the arrow positioning also is wrong

[aronhelser]

Yes, that result is much more desirable. How did you generate the 'expected result'? some style hacking we could use to fix the problem?

Do you have a suggested fix? I'm not set up to develop or test fixes on mobile...

[levymoreira]

To fix it I just changed the left property to 0, my suggestion is when you calculating the left value check if it's mobile if it's just don't set it, once that you are setting it directly in the element.style we just can't change it using CSS (actually we can but we need use !import).
You can test it easily using the Google Chrome mobile device view.

[archansel]

Any update on this? I have this issue as well

Position render correctly after second render; top (first render) bottom (second render). In my case, top property got wrong calculation in the first render but correct in second render

[mxcl]

The position is always wrong on first appearance however we use it. Since this issue is 2 years old I figure we're better off finding another package.

[aronhelser]

Or you could help debug and contribute a fix!

On Thu, May 7, 2020 at 1:27 PM Max Howell [e-mail] wrote:

The position is always wrong on first appearance however we use it. Since
this issue is 2 years old I figure we're better off finding another package.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/wwayne/react-tooltip/issues/374#issuecomment-625392123,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AEX6THPFX6BSP6QQQM4SUVDRQLVO7ANCNFSM4E2ANJYA
.

[mxcl]

So…. no, I won’t. I am an extremely prolific contributor to open source, but only if it looks like it's a maintained package. Sorry.

[briangonzalez]

@mxcl your comment is gross

[abdulbasit1248]

This can be achieved using the place prop. Like if you have a question mark on the left side of the screen as I have. Then use place = right similarly left if the question mark is on the right.

<ReactTooltip id={id} type="success" effect="solid" multiline={true} border textColor="#fff" place="right" backgroundColor="#042E60" />