[Bug] Tooltip not shown on fullscreen

[inviolablegenesis]

Version

5.4.0

Link to Minimal Reproduction

https://jsfiddle.net/m4zvefah/

Steps to Reproduce

1. In a line chart, set the following values for tooltip:

appendToBody: true,
confine: true,

This is to solve the issue regarding tooltip being cut off when container is so small.
The tooltip in this case should be viewable when you hover.

2. Open the parent div in HTML5 fullscreen mode
3. Check for the tooltip again.

Current Behavior

On fullscreen mode, the tooltip is not displayed.
This is because of the following code:

appendToBody: true,
confine: true,

but this code is needed to be able to view the tooltip in normal mode (not fullscreen) especially when the chart is small

Expected Behavior

Both modes should show the tooltip

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[helgasoft]

Changing your goFull function may work:

function goFull() {
  if (document.fullscreenElement) {
    opt = { tooltip: { confine: true }};
    chart.setOption(opt);
    document.exitFullscreen();
  } else {
    opt = { tooltip: { }};
    chart.setOption(opt);
    document.getElementById('root').requestFullscreen();
  }
}

[plainheart]

As you have enabled appendToBody, the tooltip DOM is mounted on the body rather than the element #root, so it won't be visible if you request fullscreen on the root element. Instead, you should request fullscreen on the body element.
In another way, after #18436 is merged, you can also explicitly set the append target to be #root.

[inviolablegenesis]

@helgasoft thanks for providing a solution. i tried that but it seems to be not the most feasible answer for me. hence, i requested this fix.

@plainheart thank you for pointing me to a PR. i think that's a solution i'm waiting for but let's see once it's merged.

[plainheart]

I don't think this is a bug of ECharts since you are not requesting fullscreen on the body element where the tooltip DOM is mounted. A way to solve this without PR #18436 is to manully append the tooltip DOM to your #root element.

chart.setOption({
  // ...
  tooltip: {
    className: 'chart-tooltip'
  },
  // ...
})

document.getElementById('root').appendChild(document.querySelector('.chart-tooltip'))