ngx-bootstrap: Tooltip/popover placement with `container="body"` is wrong when using templates

use [adaptivePosition]="false" and it will work

It looks like that this is somehow related to dynamic templates. You have the issue with *ngFor and I have it with *ngIf I updated your example https://stackblitz.com/edit/ngx-bootstrap-mshlrn

Setting [adaptivePosition]="false" works in some cases. The problem is now some other tooltips near the edge are not adjusted and the text is off screen.

I’ve gotten best results by setting an id on a container element (with position: relative) and passing that (prefixed with #) as the container. Also setting placement to “auto” helps.

I rechecked the first StackBlitz (https://stackblitz.com/edit/ngx-bootstrap-bdexcy) and it seems that it’s not only related to the dynamic template, it seems also be related to the overflow: auto container style.

With overflow

Without

Note: This only works if [adaptivePosition] is true.

To reproduce simply open the StackBlitz and remove overflow:auto. The first two buttons will not work, because there is [adaptivePosition]="false", the third will show the popover at the right place.

Note2: I think this could be a “workaround” for some of you, but I don’t think that is really the issue. If you check the updated StackBlitz (https://stackblitz.com/edit/ngx-bootstrap-mshlrn) it is working with the overflow and no-dynamic-template (third button). (Hopefully this will work in our project 😄)

@Neill83 I don’t doubt that it’s working for you…

I’ve changed my reproduction scenario to show that it’s not working properly no matter if [adaptivePosition]="false" is set or not: https://stackblitz.com/edit/ngx-bootstrap-bdexcy

Maybe I am doing something wrong!?

It’s much easier than that. The following code is already broken:

<div style="height: 100px"></div>
<div style="overflow-x: auto">
  <button class="btn btn-primary" type="button"
        placement="top"
        triggers="focus"
        popover="Some content"
        container="body">Click me</button>
</div>

I think the container attribute is broken for a few versions since it shouldn’t have any effect of how the container looks like.