javascripthtmltooltipbootstrap-5echarts

How to have eCharts tooltip fully visible in the page with Bootstrap

I was trying to implement a Bootstrap 5.x design for some eCharts graphs.

But the tooltip goes out of the page and only part of it is visible.

The code it's too long to put in stackoverflow snippet so I made a Jsfiddle as example.

See this:

https://jsfiddle.net/18g0op7c/

the chart it's included in a div tag like this:

<div id="A" style="width: 100%; height: 100px; background-color: rgb(102, 102, 102);">
  <div id="mainchart" style="width: 100%; height: 100%;">
    
  </div>
</div>

So the question it's:

How to have eCharts tooltip fully visible in the page with Bootstrap?

This is just a sample drawing template. The one used is quite different and more complex.

So I want to point out also that for some reason after initialization the div goes by default in style position: relative;. This choice makes the tooltip go under some other graphic elements (I refer to the header tag when the graph is at the top).

Solution

  • You can use the confine or position property of tooltip.

    For example

    tooltip: {
    position: [0, '100%']
}

    should work.

    If there are other html elements overlapping the tooltip you can also take a look at appendTo.