在Bootstrap页面中如何让ECharts提示框完整显示？

针对你在 Bootstrap 5.x 环境下使用 ECharts 遇到的提示框（tooltip）超出页面范围、被其他元素遮挡的问题，可通过以下几种方式解决：

1. 将提示框挂载到页面 body #

默认情况下，ECharts 提示框会被嵌套在设置了 position: relative 的父容器内，导致定位被限制。通过配置 appendToBody 属性，将提示框直接挂载到页面 body 上，脱离父容器的定位限制：

option = {
  tooltip: {
    appendToBody: true,
    // 保留你原有的提示框配置（如 formatter、trigger 等）
  },
  // 其他图表配置项
};

2. 开启视口限制自动调整 #

开启 confine 属性，让 ECharts 自动计算提示框位置，避免超出浏览器视口范围：

tooltip: {
  appendToBody: true,
  confine: true,
  // 可选：自定义位置逻辑，比如避开顶部 header
  position: (point) => {
    // 根据实际 header 高度调整偏移值
    const headerHeight = 50;
    return [point[0], Math.max(point[1], headerHeight)];
  }
}

3. 移除父容器的溢出裁剪 #

检查父容器 #A 的样式，如果设置了 overflow: hidden 会裁剪提示框，需修改为 overflow: visible：

#A {
  overflow: visible !important;
}

4. 提升提示框层级避免遮挡 #

如果提示框被 header 等元素遮挡，通过 CSS 提升其 z-index 层级：

.ec-tooltip {
  z-index: 9999 !important; /* 确保数值大于 header 的 z-index */
}

内容的提问来源于stack exchange，提问作者user27160653