如何防止 Bootstrap 工具提示崩溃？

Question

Bootstrap Tootip 会随机散开，将箭头与 body 分开，如下图所示：

我使用 this webpage 在多个浏览器上对此进行了测试，这种行为可以随机出现但仍然会发生：

Firefox 51.0.1 上的工具提示：

Microsoft Edge 38.14393.0.0 上的工具提示：

GoogleChrome56.0.2924.87（64 位）上的工具提示：

如何避免这种情况发生？

PS：我认为这是一个渲染问题，关于 body 就在箭头后面，实际上不是锯齿，而是接近锯齿。可能使箭头与 body 相交会解决这个问题，但如果 Bootstrap 团队或其他配置不会让我弄乱工具提示模板，我宁愿这样做。

Answer 1

当缩放不是 100% 时，通常会像其他类似的东西一样分崩离析，这很可能是由于舍入误差造成的。我过去解决这个问题的唯一方法是丢失一个像素，然后将不会显示四舍五入到一个完整像素的半像素，至少在页面未缩放的情况下是这样。

演示：https://jsbin.com/sihafu/edit?html,css,js,output

我使用 html 来避免 !important 的特殊性。无论工具提示位于何处，您都可以使用父 class。

html .tooltip.left .tooltip-arrow {
  right: 1px;
}

html .tooltip.top .tooltip-arrow {
  bottom: 1px;
}

html .tooltip.bottom .tooltip-arrow {
  top: 1px;
}

html .tooltip.right .tooltip-arrow {
  left: 1px;
}