NgbTooltip doesn't trgigger on <td> element

Viewed 1485

I'm trying to put ngbTooltip on <table> elements
I already encountered problems on <th> which as been fixed by using container thanks to this post.
The problem comes on <td> elements which does not display any tooltip and I can't find any answer following documentation.

<tbody>
<ng-container *ngFor="let line of aggreg | sortByElement:filterField:ascending; let idx = index">
  <tr *ngIf="showLine(line)">
    <!-- tds without tooltips here -->
  </tr>
  <ng-container *ngIf="detailsSelected === idx && showLine(line)">
    <tr *ngFor="let color of getColors(line) | sortByElement:'count':'false'" class="subline">
      <!-- tds without tooltips here -->

      <!-- Tooltip doesn't display when condition is true -->
      <td ngbTooltip="foo" placement="left" *ngIf="conditionHere" class="..." (click)="redirect(line)">
        <i class="fas fa-times"></i>
      </td>
      <!-- Tooltip doesn't display when condition is true -->
      <td ngbTooltip="bar" placement="left" *ngIf="otherConditionHere" class="..." (click)="redirect(line)">
        <i class="fas fa-check"></i>
      </td>
      <!-- Tooltip doesn't display when condition is true -->
      <td ngbTooltip="baz" placement="left" *ngIf="anotherConditionHere" class="..." (click)="redirect(line)">
        <i class="fas fa-camera"></i>
      </td>
    </tr>
  </ng-container>
</ng-container>
</tbody> 

Also adding container="body" doesn't fix for <td>

1 Answers

Have you tried to trigger an event manually to display the tooltip ? Try to trigger it and check in your html if the tooltip code appears somewhere, it might be a css issue that can be tweaked by overloading some properties.

Related