Tooltip placement incorrect when element is near edge and when using ng-template

Bug description:

So I had reported #2465 earlier, but it turns out my issue was something else entirely. If you are using an ng-template to display the content of a tooltip, and the element that displays the tooltip is near the edge of the screen, the tooltip will be incorrectly placed. You can see in the below stackblitz that there are three buttons. All three pull from the same variable for it’s content. But the last two, display the content in a ng-template. The second button works fine, but the third button which is at the edge of the screen you can see is positioned incorrectly, there is plenty of room for it all around, but its offset from the element incorrectly.

Link to minimally-working plunker that reproduces the issue:

https://stackblitz.com/edit/angular-fneazi-ljhkng?file=app%%2Ftooltip-basic.html

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 6.0.0

ng-bootstrap: 2.1.1

Bootstrap: 4.1.0

1 possible answer(s) on “Tooltip placement incorrect when element is near edge and when using ng-template