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 }) 😄

[protoEvangelion]

Or having it based dynamically off of the trigger node:

overridePosition: ({ left, top }, currentEvent) => {
    // This function is called 3 times (once with target node & twice with event)
    // so we need to compute the targetNode
    const targetNode = currentEvent.getBoundingClientRect ? currentEvent : currentEvent.target;

    const { top: targetNodeTop } = targetNode?.getBoundingClientRect?.() || {};

    return { left, top: targetNodeTop || top };
}

In this case, my tooltip is place: 'right' but is getting cut off at the top of the screen. This would place the top aligned with the trigger node so it is not cut off.

[ashishsurana]

I would like to contribute to this issue.
I want to build a feature to deal with this kind of problem, recently I encountered the issue where the tooltip (bottom) of the last list should be shown upwards.
so in that case, we can build a feature let's say it "autoAdjust", which can change the place.
@Rogger794 Would love to have your guidance and inputs on this.

[roggervalf]

@ashishsurana we can work together. 👍

[emicarito]

I use the className field and add the class mw-20
.mw-20{ max-width: 20%; }

this fix my problem.

[mrclay]

This seems to fix for me:

        overridePosition={({ left, top }, _e, _t, node) => {
          return {
            top,
            left: typeof node === 'string' ? left : Math.max(left, 0),
          };
        }}

But I also used max-width: 250px for readability.

[gempain]

This is how I fixed it (thanks @mrclay for your example):

overridePosition={({left, top}, event, triggerElement, tooltipElement) => {
  return {
    top,
    left: Math.min(left, window.innerWidth - tooltipElement.offsetWidth),
  };
}}

[manishvvasaniya]

I use the className field and add the class mw-20
.mw-20{ max-width: 20%; }

this fix my problem.

Thank you it help me to

[sayhicoelho]

With Tailwindcss, I fixed this using max-width:

<ReactTooltip
  id="default-tooltip"
  place="top"
  className="max-w-[70%] md:max-w-[50%] xl:max-w-[40%] 2xl:max-w-[20%]"
/>

"react-tooltip": "^5.26.0"

Thanks @emicarito !

[manzil-infinity180]

What i used

import { Tooltip } from "react-tooltip";
interface ITooltip {
  id: string;
  place:
    | "top"
    | "top-start"
    | "top-end"
    | "right"
    | "right-start"
    | "right-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "left"
    | "left-start"
    | "left-end";
  content: string;
}
export function TooltipDescription({ id, place, content }: ITooltip) {
  return (
    <>
      {content.length > 0 && (
        <Tooltip id={id} place={place} content={content} className="max-w-xs" />
      )}
    </>
  );
}

export default TooltipDescription;