如何使用Bootstrap让eCharts工具提示在页面中完全可见

Question

我试图为一些 eCharts 图表实现 Bootstrap 5.x 设计。

但是工具提示超出了页面，只有部分可见。

代码太长，无法放入 stackoverflow 片段中，所以我制作了一个 Jsfiddle 作为示例。

看这个：

https://jsfiddle.net/18g0op7c/

图表包含在

div

标签中，如下所示：

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

所以问题是：

如何使用Bootstrap让eCharts工具提示在页面中完全可见？

---

这只是一个示例绘图模板。使用的方法完全不同且更复杂。

所以我还想指出，由于某种原因，初始化后

div

默认采用

position: relative;

样式。此选择使工具提示位于其他一些图形元素下方（当图形位于顶部时，我指的是

header

标签）。

Answer 1

您可以使用 tooltip 的 confine 或

position

属性。

例如

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

应该可以。

如果有其他 html 元素与工具提示重叠，您还可以查看 appendTo。