Tooltip position bug when the component is on the right side

[topvis]

Version

2.12.3

Environment

Windows 7, Chrome 60

Reproduction link

https://codepen.io/topvis/pen/OjNxam?editors=001

Steps to reproduce

Run CodePen repo, then hover the mouse over the button.

What is expected?

The little triangle arrow on the tooltip box should still point to somewhere on the component.

What is actually happening?

The tooltip points to the wrong position. ref. to the screenshot.

[benjycui]

Trace: yiminghe/dom-align#22

[yuezk]

@benjycui Has this issue been fixed? I can reproduce this issue with the latest Ant Design. Here is a demo compared with the react-bootstrap tooltip.

https://codesandbox.io/s/3xp4x41klq

[yuezk]

@afc163 Can you reopen this issue for easy tracking?

[yuezk]

@afc163

I have been dealing with this issue for a few days and found that the position of the popup element is correct, while the position of the arrow is not correct. So it's not a problem with the dom-align module I think.

After debugging, I found that the position of the arrow was hardcoded in the CSS file, instead of calculating dynamically based on the position of the target element and the popup element. Eventually, the position of the arrow is not flexible enough, it will break in some special situations.

I tried to fix this problem on my own. The solution is that I extend the Tooltip class and override the onPopupAlign method, in which I can get the target element and the popup element both, base on which, I can calculate the correct position of the arrow.

Here is the demo solution. It works well for placements top bottom left and right.

In this solution, I get the target region with the getBoundingClientRect method. But I think the better way is accessing the target region through the align parameter. Because the method doAlign inside the dom-align module has calculated the target region already and covered many corner cases, we don't need to recalculate it anymore. So I think the doAlign method should return the target region as well.

https://github.com/yiminghe/dom-align/blob/98bcb1874f90a8725064f76449f85d9a452dba23/src/align/align.js#L196-L201

OK, that's all, the solution above is just a proposal, feel free to comment if you have any question.

[ztplz]

#14582
The same reason, dom-align resets the points, but then moves the position of the element.

[yuezk]

@ztplz Maybe not, I am complaining about the position of the arrow, not the position of the popup element. The position of the popup element is expected.

BTW, #14582 works well for me.

[ztplz]

https://github.com/yiminghe/dom-align/blob/98bcb1874f90a8725064f76449f85d9a452dba23/src/align/align.js#L159
虽然我没看到你的demo 但是我觉得问题是一样的 这里在没匹配成功的情况下 它会重置points
但是然后它又会调整位置 但是其他的组件是根据这个points来决定自己的位置的 所以那些箭头在某些情况下错误方向的

[ztplz]

我好像搞错了 不是这个问题 虽然有关联 但是关联不大 但是以后可能用更精确的相对位置判断
这个箭头的位置可以根据元素的中心位置来搞

[wbobeirne]

I can confirm that I'm also experiencing this issue, and that @yuezk's workaround works for me as well. Unfortunately the override is a little sub-optimal due to a lot of typing issues, namely that this.tooltip is private rather than protected. It'd be nice to see this fixed in antd proper.

[yuezk]

There are around 280 issues, 246 of them are marked as inactive. Good job! @ant-design-bot

[afc163]

@yuezk Feel free to compare with other open source projects, we try our best.

[afc163]

Trace react-component/tooltip#166

[quyctd]

any update?

[afc163]

Auto arrow position has been supported in antd 5.x now! #40632

See https://ant.design/components/tooltip#components-tooltip-demo-shift