Ngx-bootstrap: fix(tooltip): first-opened tooltip has wrong placement

[DanielKucal]

Bug description or feature request:

Tooltip being open as a first one has wrong placement until element destroy...
Video will show it the best: https://youtu.be/iVS5GughnuQ

Plunker/StackBlitz that reproduces the issue:

I couldn't reproduce it in plnkr... I'd like to get some hints how to debug it, where to start, what can be the problem etc.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: I've tried the following versions: v2.0.0-beta.9, v2.0.0-beta.10, v2.0.0-rc.0

Angular: v4.4.6

Bootstrap: v3.3.6

Build system: webpack v2.6 (angular-starter)

[IlyaSurmay]

Ok, I see it. However, there's not much we can do without reproduction :( Try to reproduce it using the same html and css you're using in your project. Also, I see that you have some customization of tooltip arrow because it has different position from time to time, the reason of the issue might be in this as well

[DanielKucal]

@IlyaSurmay, thanks for reply. The behavior remains the same if I turn off additional styling... I tried yet don't know much how to reproduce it, but will keep trying. I was also trying to work-around it by triggering tooltips manually, replacing _tooltip property etc, but nothing solves the problem...

[DanielKucal]

Here is my work-around for this buggy behavior:

import { SharedStorage } from 'ngx-store';

@Component({
  template: `
  <span *ngFor="let item of items">
    <a #tooltip [tooltip]="'some tooltip'" (onShown)="onTooltipShow(tooltip)">item</a>
  </span>`,
})
export class ComponentOrService {
  public items = [1, 2, 3, 4];
  @SharedStorage() protected isFirstTooltip: boolean = true;

  public onTooltipShow(tooltip: HTMLElement) {
    if (!this.isFirstTooltip) { return; }
    tooltip.parentElement.appendChild(tooltip);
    this.isFirstTooltip = false;
  }
}

[FilipLaurentiu]

I have a similar problem. Any news?

[DanielKucal]

@FilipLaurentiu, nope, you can thumb this issue up.
If you are interested, I solved it by reattaching first tooltip this way:

<a [tooltip]="tooltipContent"
      #tooltip
      (onShown)="onTooltipShow(tooltip)">
  Something with tooltip
</a>

    public isFirstTooltip: boolean = true;

    public onTooltipShow(tooltip: HTMLElement) {
        // work-around for firstly open tooltip placement
        if (!this.isFirstTooltip) { return; }
        tooltip.parentElement.appendChild(tooltip);
        this.isFirstTooltip = false;
    }

Just realized I already posted it here, lol.

[mmabraham]

I came across a similar bug and was able to reproduce it here: https://stackblitz.com/edit/ngx-bootstrap-tooltip-bug

The placement is off for most of the tooltips and not just the first one opened.

[mmabraham]

@DanielKucal adding container="body" helped for me. The tooltips are still a few pixels off but much better than before.

[daddyschmack]

this is still occurring for me. Ver 5.2, I do have container='body' in the html

[poddarkhushbu07]

This issue still occurs in my code. By applying property container="body", tooltip is not set to proper position. It is visible away from the applied field.