Bootstrap-vue: Tooltip moved slightly left when hovered on <b-nav-item>

[jippy89]

What happens

So as you can see that it's slightly left on hover. ( I was hovering at the power button )

What I've tried
Deleting all the margin, and paddings doesn't make the tooltip goes to the middle. Tried on usual button, and it works like usual, so tooltip only moves left when used in b-nav-item. Checking on the values of translate3d. Upon show=true the translate3d properties is like in "What I wanted", but when I hover off and I go mouseover again it changes.

What I wanted
Works like the button, like this.

Here is my fiddle, but Bootstrap-Vue doesn't work in JSFiddle for some reason. I also use font-awesome for the icons. https://jsfiddle.net/irfandyjip89/vydoesgL/

Operating System: Windows 10, 64 bit
Tested on Browser: Chrome Version 71.0.3578.98 (Official Build) (64-bit)
Bootstrap Vue Version: On Fiddle @latest | On my own 2.0.0-rc11 but both resulted in same errors!
Bootstrap Version: Both 4.1.3

[jippy89]

Ah, sorry, I guessed I just didn't type the right issue.. #1732 solved my issue.

@50l3r
This is a know issue (bootstrap and popper) in Popper.js.

For details check comments of the linked issues. Possible fix via CSS:

.tooltip { top: 0; }

Background: The value of top will be overridden depending by the settings used by Popper.js, if gpuAcceleration is set to false it will be replaced with the top offset of the popper, if set to true, it will stay set to 0.

If someone asked me to delete this issue, then I will delete it once asked. Thank you.