echarts: [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 tooltipissue

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

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 2
Comments: 15 (4 by maintainers)

Most upvoted comments

Try to set confine as true.

+14

plainheart on Mar 18, 2022

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;',

GIF 8-30-2022 9-28-15

NguyenTienDat on Aug 30, 2022

Tooltip goes out of page/window if text is long

give you an idea ! You can use html tag and css style in tooltip formatter funtction.

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    confine: true,
    formatter: `<div style="word-break: break-all;white-space: pre-wrap;">'This is a very very very very very very very very very very very very very very long textThis is a very very very very very very very very very very very very very very long textThis is a very very very very very very very very very very very very very very long text'</div>`
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line'
    }
  ]
};

AlaneLiang on Jun 7, 2022

toolbox? Is it not tooltip?

Sorry, for tooltip, but not working ‘confine’, width also not taking, ‘overflow:breakAll’ also not working, Is I am doing wrong any where?

tooltip: {
    show: 'true',
    confine: 'true',
    textStyle: {
      overflow: 'breakAll',
      width: 40,
    },
  },

kishore-uc on Mar 18, 2022