如何防止 Bootstrap Tooltip 崩溃？

Question

Bootstrap Tootip 会随机分崩离析，将箭头与主体分开，如下图所示：

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

Firefox 51.0.1 上的工具提示：

Microsoft Edge 38.14393.0.0 上的工具提示：

Google Chrome 56.0.2924.87（64 位）上的工具提示：

如何避免这种情况发生？

PS：我认为这是一个渲染问题，关于身体在箭头之后出现的问题，实际上并不是锯齿，而是接近它。可能使箭头与主体相交会解决这个问题，但如果 Bootstrap 团队有解决方案或其他一些不会让我与工具提示模板混淆的配置，我宁愿它。

Answer 1

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

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

我使用 html 来避免 !important 的特殊性。您可以使用工具提示所在位置的父类。

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;
}