How to prevent Bootstrap Tootip from falling apart?

Question

The Bootstrap Tootip will randomly fall apart, separating it's arrow from it's body, as illustrated on the image below:

I tested this on multiple browsers using this webpage and this behavior can be seen randomly but still occurring:

Tooltip on Firefox 51.0.1:

Tooltip on Microsoft Edge 38.14393.0.0:

Tooltip on Google Chrome 56.0.2924.87 (64-bit):

How can I avoid this from happening?

PS: I think this is a rendering issue, something about the body coming just after the arrow, not actually aliasing, but close to it. Probably making the arrow intersect the body will solve this, but if there is a solution from the Bootstrap team or some other configuration that won't make me mess with the tooltip template I will rather it.

Answer 1

Usually falls apart like other similar things when the zoom is not 100% and that is likely due to rounding errors. The only way that I fixed this in the past was by losing a pixel and then that half pixel rounded up to a full pixel won't show, at least if the page is not zoomed.

Demo: https://jsbin.com/sihafu/edit?html,css,js,output

I used html for the specificity to avoid !important. You can use your parent class of wherever your tooltip is located.

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