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.

score 1 · Accepted Answer · answered Feb 10 '17 at 04:07

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

answered Feb 10 '17 at 04:07

Christina

34,296
17
83
119

That's the solution that i thought...just to be clear, this is happening on all browsers with 100% zoom (no zoom at all) – Michel Feinstein Feb 10 '17 at 04:09
I don't know about all browsers, but Chrome/Webkit is crappy with rounding errors. I usually have to make images 100.5% when they are smashing up against each other and then do other work arounds due to using percentage based design. – Christina Feb 10 '17 at 04:12
1

Apparently this will be fixed on Bootstrap 4 https://github.com/twbs/bootstrap/pull/21606 – Michel Feinstein Feb 12 '17 at 00:08

How to prevent Bootstrap Tootip from falling apart?

How can I avoid this from happening?

1 Answers1