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

[bluecaret]

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

[pkozlowski-opensource]

Hmm, I think I know what is going on here, check this stackblitz: https://stackblitz.com/edit/angular-fneazi-dpxqu7?file=app/tooltip-basic.html

The only difference with yours is that I've removed binding from tooltips' template content. This means that we don't need to detect changes to get size of a tooltip (that is - its window with content inside).

I think that the solution here is to run change detection on content before measuring element. I will try to fix it for the next release.

Thnx for reporting and bearing with us, much appreciated!

[bluecaret]

Awesome! Glad to help where I can :)

[bluecaret]

@pkozlowski-opensource any ETA on this? Thanks!

[bluecaret]

@pkozlowski-opensource Hi again, not to pester you, but is still able to get fixed, hopefully soon? Thanks!

[kettunen]

@pkozlowski-opensource any news about this one?

For temporal fix I added min-width: 200px for .tooltip that works in my case (it has to be big enough).

[maxokorokov]

@kettunen should be fixed in #2972 that is planned for 4.0.3 - the next minor release. @fbasso will have more details soon