如何通过Bootstrap或其他工具实现无碰撞的多Tooltip？

Bootstrap Tooltip底层依赖Popper.js处理定位和碰撞规避，你当前的代码未配置相关碰撞检测选项，因此出现重叠问题。通过调整Tooltip的初始化配置，就能让Popper自动帮你避免碰撞：

修改后的代码 #

let icons = document.getElementsByClassName("icon");
for (let iIcon = 0; iIcon < icons.length; iIcon++) {
  if (icons[iIcon].offsetParent !== null) {
    new bootstrap.Tooltip(icons[iIcon], {
      boundary: document.body,
      placement: 'auto', // 让Popper自动判断最优显示方向
      popperConfig: {
        modifiers: [
          {
            name: 'preventOverflow',
            options: {
              padding: 10, // 设置tooltip与页面边界的最小间距
            }
          },
          {
            name: 'flip',
            options: {
              fallbackPlacements: ['top', 'right', 'bottom', 'left'], // 空间不足时的备选方向优先级
            }
          }
        ]
      }
    }).show();
  }
}

关键配置说明 #

• placement: 'auto'：Popper会自动检测目标元素周围的可用空间，选择不会溢出或重叠的方向显示tooltip。
• preventOverflow：确保tooltip不会超出设置的边界（这里是document.body），同时可通过padding参数调整tooltip和边界的距离，避免贴边显示。
• flip：当首选位置空间不足时，按照指定的备选顺序自动切换tooltip的显示方向，尽可能避免与其他元素或视口边界重叠。

额外优化建议 #

如果多个图标本身间距极小，Popper自动调整后仍可能出现轻微重叠，可以尝试：

• 给tooltip添加自定义CSS，增加margin: 4px之类的样式拉开间距；
• 限制tooltip的最大宽度，避免因内容过长导致的溢出重叠：

.tooltip {
  max-width: 200px;
}

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