Tooltip with big text content overflows the window

[filipegiusti]

I changed a few things on the examples page and was able to replicate the issue. When there is a big text on the tooltip and the element isn't centered in the screen, it gets cut off on the left side.

When there is more text it even splits it into multiple lines but still doesn't respect the left side boundary.

Any ideas to make it respect the left side and wrap content with newlines earlier?

[AlexLaRochelle]

I have the same issue, and it's especially weird since the tooltip adjusts fine when it overflows on the right side.

[aronhelser]

I think someone with a mobile screen figure out how to adjust the styles so it didn't overflow, but IDK which issue it might be in....

…

On Thu, Mar 14, 2019 at 10:22 AM AlexLaRochelle ***@***.***> wrote: I have the same issue, and it's especially weird since the tooltip adjusts fine when it overflows on the right side. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#476 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AS_pnVcVs10YIm0nD3Ngmk_HrsL4GOhfks5vWltDgaJpZM4bl5Ku> .

[AlexLaRochelle]

I managed to fix this (I really don't know if it works in all cases) by applying a class with max-width: 70vw to the tooltip, as mentioned in #447
I also have multiline set to true for the tooltip.

Seems to work fine on mobile and desktop

[filipegiusti]

I tried it in my project and later on the examples page, no good. It only works if you know how far the element is from the left side.

1920px wide:

About 900px wide:

[AlexLaRochelle]

By adding the max-width: 70 vw to the style of the ReactTooltip, it positions automatically on the right when it would overflow on the left for me. Mind sharing your code?

[filipegiusti]

It might be browser specific, look at those scary eyes on my screenshot 🙈. Chrome 72.0.3626.121 on Linux here.

https://react-tooltip.netlify.com/

$(".demonstration a[data-tip]").dataset.tip = "Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip Hello multiline tooltip "

$(".demonstration a[data-tip]").style.left = 0;
$(".__react_component_tooltip.place-top.type-dark ").style.maxWidth = "70vw"

And try different widths, sometimes it works, sometimes it doesn't.

[paul-loopup]

+1 Would love to see this fixed :)

[AdiBakija]

I have a very similar issue. place="right" only works for mobile view and on desktop view it goes back to the default style place="top" despite the prop being set as place="right".

[michchan]

+1

[rjhilgefort]

Having this issue as well

[Ensaphelon]

+1

[protoEvangelion]

@wwayne or @aronhelser are there any workarounds you can provide until this can be fixed?

Looking to the future are there any plans in the pipeline for react tooltip to smartly choose the best location where it won't get cutoff?

Thanks 😄

[aronhelser]

I am happy to accept any PRs that the community can provide! Wayne has moved on to other projects, and I am not actively working with React anymore. I am acting as a caretaker, more or less. I hope that one of the people experiencing this issue can work on it....

[protoEvangelion]

I was able to get around it with overridePosition: ({ left }) => ({ left, top: 50 }) 😄