different tooltips offset when hovering first time and second times

[maxlibin]

When hovering a tooltip item: http://v4-alpha.getbootstrap.com/components/tooltips/
the first time offset will be different from other times, any fixes?

[jesusmtzarvizu]

Could you please paste the code from the first and second case to see it??

[maxlibin]

The screenshot is taken from official site using chrome on macOS

[bardiharborow]

Confirmed on Mac Chrome 55.

[Johann-S]

Confirmed on Windows 10 Chrome 54

[ArunHub]

confirmed on windows firefox developer edition 51.0a2

[bardiharborow]

I used setInterval(function() { console.log($('.bs-tether-element')[0].outerHTML) }, 1000) to pull the HTML for the tooltips.

First activation:

<div class="tooltip fade bs-tether-element bs-tether-enabled bs-tether-abutted bs-tether-abutted-top bs-tether-element-attached-bottom bs-tether-element-attached-center bs-tether-target-attached-top bs-tether-target-attached-center in" role="tooltip" id="tooltip258569" style="left: 0px; position: fixed; transform: translateX(208px) translateY(-140px) translateZ(0px); bottom: 0px;"><div class="tooltip-inner">Tooltip on top</div></div>

Second activation:

<div class="tooltip bs-tether-element bs-tether-abutted bs-tether-abutted-top bs-tether-element-attached-bottom bs-tether-element-attached-center bs-tether-target-attached-top bs-tether-target-attached-center fade bs-tether-enabled in" role="tooltip" id="tooltip373736" style="left: 0px; position: absolute; transform: translateX(208px) translateY(2368px) translateZ(0px); top: 0px;"><div class="tooltip-inner">Tooltip on top</div></div>

Third activation:

<div class="tooltip bs-tether-element bs-tether-abutted bs-tether-abutted-top bs-tether-element-attached-bottom bs-tether-element-attached-center bs-tether-target-attached-top bs-tether-target-attached-center fade bs-tether-enabled in" role="tooltip" id="tooltip639149" style="left: 0px; position: absolute; transform: translateX(208px) translateY(2368px) translateZ(0px); top: 0px;"><div class="tooltip-inner">Tooltip on top</div></div>

[Johann-S]

The most interesting exemples are the first and the second.
The difference between the second and the third is the just the tooltip's ID because when we hide the tooltip is destroyed so the generated ID will be different on the next show.

See the difference between first and second exemple : https://www.diffchecker.com/kyilr4EM

Edit :
a Codepen to test : http://codepen.io/anon/pen/yVbBra

[dumb]

Just to note: this also happens on Safari 10 on OS X. And, strangely, it only happens with the top, left and html examples, but not the right and bottom ones.