Tooltips appear in wrong position when placed on top

[philraj]

trafficstars

I have no idea what's causing this one, other than it must be a bug in the way the library calculates the position of the element the tooltip is supposed to be attached to. Seems like when moving in one direction the behavior is fine, and when going the other way it breaks.

I had the same issue (tooltip would appear higher than it's supposed to, wrong top value) in another page, where the buttons were stacked vertically. Moving from button to button downwards would work fine, but moving upwards would produce the bad position. It also seems sensitive to the size of the tooltip itself, because that one was fixed when I made the tooltip text smaller.

Any ideas?

[philraj]

The issue seems to be related to how close the Delete button is to the edge of the viewport, and the fact that the next tooltip has more content inside it.

The tooltip isn't badly positioned when transitioning from the Delete button, in the following cases:

• If I increase the distance between the buttons and the edge of the viewport
• If I change the tooltip text of the Move down button to be the same as the Delete button, (i.e. both tooltips say "Delete"), so that the size of the tooltip doesn't change when moving from one to the other

So this seems to be some kind of issue with the tooltip positioning logic, which is triggered when one tooltip is close to the edge of the viewport, and you transition to another tooltip which has the same or smaller size as the first tooltip you mouse over.

Any chance you can take a look at this?

[alexkb0009]

Am experiencing the same thing. Noticed that after tooltip is hidden, the "left" and "top" style properties are still set to their last values. If unset them prior to hovering over the next element (where would normally get wrong position), e.g. in Chrome Inspector Tools, this seems to not happen. Just created a quick workaround which seems to work based on how tooltip position is updated internally by the component ( https://github.com/wwayne/react-tooltip/blob/master/src/index.js#L380 ):

<ReactTooltip effect="solid" ref="tooltipComponent" afterHide={()=>{
    var node = ReactDOM.findDOMNode(this.refs.tooltipComponent);
    node.style.left = null;
    node.style.top = null;
}} />

[roggervalf]

Could someone verify if this issue still exist please?

[mahmoud-awad99]

it still exists, I am using React 16.8.6 and React-tooltip 3.10.0 in the picture the tooltip supposed to appear on the first icon, this happens only occasionally, not all the time, the fix provided by AlexKB0009 worked gracefully

[mahmoud-awad99]

as ReactDOM.findDOMNode is deprectaed in strictmode and its usage is discouraged, I found another solution to solve it

<ReactTooltip effect="solid" id="tooltipProvider" place="bottom" ref={this.tooltipRef} afterShow={ () => this.tooltipRef.current.updatePosition() } />

[mahmoud-awad99]

to give more context on how this error happened in my case, it is as follows, all icons in the previous picture have one line of text for the tooltip, except the last one which has two lines of text hence the tooltip height is bigger than the rest. now if you do the following, hover over the last icon which has a bigger height, then move away from any icons and don't show any tooltip, then go back to hover above an icon which has one line text (smaller height) then the tooltip location is incorrect.

[adamhp]

node --version
v16.8.0

"react-tooltip": "^4.2.21"

Still experiencing this issue in 4.2.21.

I modified the above workaround to the following, using 'useRef'.

import reactDom from 'react-dom';
import { useRef } from 'react';
import ReactTooltip from 'react-tooltip';

export function Component() {
  const tooltipComponent = useRef();
  return (
    <>
      <ReactTooltip
        effect='solid'
        ref={tooltipComponent}
        afterHide={() => {
          var node = reactDom.findDOMNode(tooltipComponent.current);
          node.style.left = null;
          node.style.top = null;
        }}
      />
      <div data-tip='Example'></div>
    </>
  );
}