[Bug] Echarts - Tooltip goes out of page/window if text is long

Version

5.3.0

Link to Minimal Reproduction

No response

Steps to Reproduce

If content is bit long in tooltip, it goes out of screen. so, I tooltip content need to have specific width and content should fit inside the given width with using options. without using any custom class and style(css).

Current Behavior

Bar(vertical) echart- If text is long the Tooltip goes out of window/page on hover bar, not able to wrap the text with in the given width. when tooltip goes out of window/page, scroll bar appears in the bottom of the window/page.

And in the small screen(1366*768) the first bar of axislabel disappears, you can see in the screen shot. even if add interval as 0 “axisLabel”: { “show”: true, “interval”: “0”, }

below is the screen shot of tooltip and bottom axislabel issue

Expected Behavior

Bar(vertical) echart- If text is long the Tooltip should not go out of window/page on hover bar. when specific width is given to tooltip, the text should come in next line.

In the small screen(1366*768) the first bar of axislabel should appear.

scroll bar should not appears in the bottom of the window/page.

Environment

- OS:Ubuntu
- Browser: Chrome
- Framework: Echart

Any additional comments?

No response

[plainheart]

Try to set confine as true.

[NguyenTienDat]

I think textStyle still not working.

https://github.com/apache/echarts/issues/14211 https://github.com/apache/echarts/pull/14214

I think extraCssText is the best on my case

extraCssText: 'width:auto; white-space:pre-wrap;',