Misaligned tooltips with certain inline elements

Describe the bug

I have a problem where a lot of our tooltips are (slightly) misaligned. This happens mostly on inline(-block) spans and i-elements (mostly: font awesome icons). The tooltip & its anchor (the little arrow at the bottom of the tooltip) are off-center. 95% of the times the misalignment only happens horizontally, and it is usually in a range of 1 to 20 pixels. In 5% of the cases, there is (also) a very slight vertical misalignment (usually the tooltips is then placed 1 or 2 pixels too low).

The misalignment varies per location/page, in that in one place the tooltips are placed a bit too far to the left, and on other locations a bit too far to the right. If the misalignment was the same everywhere, I would probably have fixed it already via a CSS rule (not the ‘real’ solution of the problem of course, but it keeps my work process going). It happens with elements that are close to the page edges, as well as with elements that are sufficiently far away from it (so the misalignment cannot be caused by the fact that there is not enough room for it to be shown centered correctly).

The code that I am using, usually looks like this: v-b-tooltip.hover="{ customClass: 'vue-clm', delay: { show: 100 } }" title="Some tooltip text"

When I use the same code with bootstrap-vue buttons, the tooltips seem to be always aligned correctly. On older pages of our application, where we use straight Bootstrap 3, the tooltips are aligned correctly on all elements. So it seems to be a problem with bootstrap 4 and/or bootstrap-vue. I have this problem at least for a few months (and bootstrap-vue minor versions) now.

Versions

• bootstrap: v4.3.1
• bootstrap-vue: v2.15.0
• vue: v2.6.12

Environment: It happens in both of our supported desktop browsers: IE11 and Chrome 86.0

[Tarrask]

Can this be related to https://github.com/popperjs/popper-core/issues/457

I also have misaligned issue and adding .tooltip { top: 0 } in my main css as suggested by @YoranBrondsema fixed the issue on my side.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!