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

[kishore-uc]

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.

[kishore-uc]

Try to set confine as true.

ya, confine added but no luck, still tooltip goes out of screen

  toolbox: {
    show: true,
    orient: 'vertical',
    showTitle: 'true',
    confine: 'true',
    textStyle: {
      overflow: 'breakAll',
      width: 40,
    },
}

[plainheart]

toolbox? Is it not tooltip?

[kishore-uc]

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,
    },
  },

[plainheart]

Could you please provide a simple online demo so that I can know more about your issue?

[kishore-uc]

Could you please provide a simple online demo so that I can know more about your issue?

Sure

[kishore-uc]

Could you please provide a simple online demo so that I can know more about your issue?

Please check the video, when hover on left first bar the tooltip shows only half and rest half is out of window, and scroll bar appears below the page when tooltip goes ou

https://user-images.githubusercontent.com/45749990/159412273-a5fa7c54-deaf-4161-afcb-539852002b7a.mp4

[plainheart]

Did you set tooltip.confine to true? I tried with the online example editor. It seems well.

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    confine: true,
    formatter: 'This is a very very very very very very very very very very very very very very long text'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

[kishore-uc]

Did you set tooltip.confine to true? I tried with the online example editor. It seems well.

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    confine: true,
    formatter: 'This is a very very very very very very very very very very very very very very long text'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

yes, I already tried with confine as true, but no luck.

[Chewieez]

@kishore-uc You may have already noticed this, but in your previous code sample that you shared, you had confine: 'true' using the string 'true'. I believe the value needs to be a boolean true, not a string. Should work for you then.

[AlaneLiang]

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'
    }
  ]
};

[NguyenTienDat]

Tooltip goes out of page/window if text is long

give you an idea : use html tag and css style in tooltip formatter funtction. e.g :

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'
    }
  ]
};

@Chewieez @plainheart I think confine: true is working fine, but overflow isn't. I must try formatter. Could you share me solution with textStyle in this case?

textStyle: {
      overflow: 'breakAll',
      width: 40,
 },

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

[czzonet]

It works. Great!

[dominikj111]

I think this can be closed as it works as expected, but I'm wondering why this is not set by default to true 😕

[phamhieu1412]

in my case, i fix that is ok:

formatter: `

{b0}

          <div style="display: flex; align-items: center; margin: 9px 0px 10px 0px;">
            <div style="width: 10px; height: 10px; background-color: ${styles.maxPointColor.backgroundColor};border-radius: 10px;"></div>
            <div style="margin-left: 8px;">{c0}</div>
          </div>
          <div style="display: flex; align-items: center; margin: 9px 0px 0px 0px;">
            <div style="width: 10px; height: 10px; background-color: ${styles.thPointColor.backgroundColor};border-radius: 10px;"></div>
            <div style="margin-left: 8px;">{c1}</div>
          </div>
        </div>`,

[dominikj111]

@phamhieu1412 that is just horrible reading! Do you formatting?