[Bug] Hide Tooltip when click on tooltip (with touch)

[uykusuz]

Version

5.3.0

Link to Minimal Reproduction

https://codepen.io/strassenschild/pen/WNXQKQL

Steps to Reproduce

1. open the codepen link
2. switch to mobile if not already on it (I do it by opening the dev console in chrome and activate mobile, so touch events work)
3. click on a bar in the chart
4. click on the tooltip

Current Behavior

The tooltip is not hidden.

Expected Behavior

The tooltip will be hidden.

Environment

- OS: Linux
- Browser: Chrome
- Framework: see codepen

Any additional comments?

I want to implement "hide tooltip when clicking on it" ... this may even be a nice feature for echarts tooltips in general. But I didn't find an option for it. So I do it by handling the click on the chart element (this is actually a hack as well, the touch/click events are not propagated downwards to the tooltip element) and then triggering the hidetip action. But it doesn't hide it.

[plainheart]

You may take a try like this,

const tooltip = chart.getDom().querySelector('.tooltip'); // .tooltip is the specified className.
tooltip.addEventListener("click", (event) => {
    tooltip.style.display = 'none';
    // ...
})

[uykusuz]

@plainheart Thank you for the hint! Unfortunately this doesn't work. Because this messes with the internal tooltip-visibility state of echarts. In particular the following happens:

• touch somewhere in the chart
• tooltip appears
• touch on tooltip
• tooltip disappears
• touch somewhere in the chart
• tooltip appears
• tooltip disappears

My guess is that echarts internally keeps a flag and then directly hides the new tooltip because it thinks there's still the tooltip open.

[Ovilia]

It seems to be a bug. But the requirement seems a little unexpected to me. Why do you want to hide tooltip when clicking the tooltip?

[uykusuz]

@Ovilia Because we believe it's a nice feature to hide the tooltip on mobile by simply touching the tooltip itself. Especially on small screens it's hard to actually close the tooltip, because you need to touch somewhere outside of the tooltip. And the tooltip might be bigger. You could add a close button inside the tooltip itself. But that button itself would occupy precious space as well.

Your special tooltip handle for mobile is a great addition, but that doesn't cover all chart types.

[Ovilia]

Hiding the tooltip when clicking inside it still seems to be an odd interaction to me. But this issue should be considered to be a bug anyway.

[az020]

We would like to hide the tooltip as well when clicking it. We need to show a dialog with more data details when clicking the tooltip., but the current behavior is that the tooltip is still floating on top of the dialog when the dialog is open.

[pgliang001]

@plainheart My guess is that echarts internally keeps a flag and then directly hides the new tooltip because it thinks there's still the tooltip open.

I think this is the internally flag you mention.

For detail, refer https://github.com/apache/echarts/blob/3f9c0b9ee8a23ef2a8c412e7ff46db8377a54ffb/src/component/tooltip/TooltipHTMLContent.ts#L272