如何防止Bootstrap Tootip崩溃？

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来避免特异性！重要。您可以使用工具提示所在位置的父类。

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