tooltip.appendToBody scroll-issue on touch devices

[tmtron]

Version

4.8.0

Reproduction link

https://stackblitz.com/edit/angular-echarts-append-to-body

Steps to reproduce

• Open the stackblitz example in Goolge Chrome.
• Press the "Open in New Window" button at the right-top.
• Press F12 to open Developer Tools.
• Click the "Toggle Device Toolbar" icon at the left top of chrome tools - or press CTRL-SHIFT-M.
• Click on any bar to show the tooltip window.
• Scroll down: The tooltip will remain at it's position.

What is expected?

When some e-charts are in a scroll-container the tooltip should scroll (or maybe be hidden, if scroll is not possible)

What is actually happening?

When some e-charts are in a scroll-container the tooltip will remain fixed (to the body)..

Additional

On a real phone (using Goolge Chrome mobile), we see an additional issue (which may have the same cause).
When we scroll down to the 2nd or 3rd echart and click a bar the tooltip will not show up (I guess that the calculated position is off the screen boundaries.

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[wf123537200]

Is the issue the same as #12778 ?

[tmtron]

@Ovilia why the waiting-for:author tag: do you need some more info?

[ArturMiszkowicz]

This also persist in version 5.0.0. (Reproduce: https://jsfiddle.net/zndot4ub/). As you can see on screenshot (anonymyzed) there are two tooltips, while mouse is between charts (during scroll). The tooltips will be there until user moves his mouse over chart to show another tooltip (or move on canvas where chart is rendered).

[sunbin12121]

加 1

[pissang]

@tmtron It should be the same with #12778. Which has been fixed in 5.0 @ArturMiszkowicz I think it's a new issue brought in 5.0.0. It has been fixed since 5.0.1 https://github.com/apache/echarts/releases/tag/5.0.1

[tmtron]

@pissang I can still reproduce the issue in 5.0.1

Here is an updated Stackblitz example

[plainheart]

Yes, this issue seems to be there. I'm wondering how we should properly handle this case, hide or scroll?

[tmtron]

Yes, this issue seems to be there. I'm wondering how we should properly handle this case, hide or scroll?

I could live with both - maybe it makes sense to add an option and let the users choose.

[Flourad]

移动端appendToBody开启后tooltip无法正常关闭的bug在最新版本里还是存在，请问什么时候可以解决

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[tmtron]

+1

[programmingPug]

Still an issue, can we close the tooltip on scroll?

[programmingPug]

Actually found a solution with my own question, on the parent of the scrollable container have a listener for scroll then just call the method and dispatch the hide action.

public onScroll(event: Event): void { this.chart.dispatchAction({ type: 'hideTip' }); }

[xy1041]

Still an issue, any updates?