tooltip cutting off when renders near edge of screen

[ronmara]

Summary:
If I choose place="top" but the content is too wide to fully display in the window, the left side will be rendered off-screen and there is no way for me to see the entire content of the tooltip. (the left position is negative)

Things I tried:
I added:

afterShow={() => {
    let node = ReactDOM.findDOMNode(this.refs.tooltipComponent);
    node.style.left =
        node.style.left[0] === "-" ? "0px" : node.style.left;
}}

but because I have many elements with a tooltip, moving my mouse from one element to another doesn't trigger afterShow.

I added max-width: 70% and it doesn't help either.

Expected behavior:
If (left_position === negative) { place="left/right"; }

Same problem as described here

[gurmiguel]

Hello, I solved this problem using the following approach (approximately):

const reactTooltipRef = useRef(null)
// (...)
<ReactTooltip
  ref={reactTooltipRef}
  afterShow={evt => {
    const { target } = e
    const { tooltipRef } = reactTooltipRef.current

    if (!tooltipRef) return

    const targetRect = target.getBoundingClientRect()
    const rect = tooltipRef.getBoundingClientRect()

    const overflownLeft = rect.left < 0
    const overflownRight = rect.right > window.innerWidth

    if (overflownLeft) {
      tooltipRef.style.setProperty('left', '10px')
      tooltipRef.style.setProperty('right', 'auto')
    } else if (overflownRight) {
      tooltipRef.style.setProperty('left', 'auto')
      tooltipRef.style.setProperty('right', '10px')
    }
  }}
/>

Also added

.__react_component_tooltip {
    width: calc(100% - 20px);
    max-width: 345px; // may be any size you want, I use this in my app
}

so the tooltip never get bigger than the window, triggering both overflows (left and right) simultaneously.

Not too beautiful but solves the problem.

[luknl]

This comment worked perfectly for me, and it's shorter code :)