Bootstrap 4 html tooltip in bootstrap table angular 8 for loop

Question

I am trying to add the html tooltip in the table.

Included the below CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Table code:

<table class="table table-bordered">
      <thead *ngIf="serchResults">
      <tr>
        <th scope="col">Description</th>
        <th scope="col">Action</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of serchResults">
        <td data-container="body" data-toggle="tooltip" data-html="true" title="<p>Mapped to: </p> <p>Abcd data </p> <p> Test data </p><p> Test data two </p><p> Test data 3</p>">
          {{item.title}}
        </td>
        <td><input type="checkbox" id="{{item.code}}" name="{{item.code}}" value="{{item.code}}"></td>
      </tr>
      </tbody>
    </table>

Jquery:

<script>
      $(function() {
        $('[data-toggle="tooltip"]').tooltip({
          html: true,
        });
      });
  </script>

Please have a look at the below screenshot. HTML tooltip is not working.

The tooltip HTML is not getting displayed properly in the table and inside for loop. Also applied CSS to "inner-tooltip" is not working inside for loop as well as without for loop.

Answer 1

First thing, avoid using jquery, you can use ngx-bootstrap.

Still, to fix this issue, you might need to run the below script after searchResults has been set. Reason, ngFor creates the DOM only after it has got the object on which it is iterating on. Once the serachResults object is available you need to run.

 $(function() {
        $('[data-toggle="tooltip"]').tooltip({
          html: true,
        });
 }); 

Answer 2

Found the solution. It was simple.

<table class="table table-bordered" *ngIf="serchResults; else elseTable">
      <thead>
      <tr>
        <th scope="col">Description</th>
        <th scope="col">Action</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of serchResults">
        <td>
          <span data-container="body" data-toggle="tooltip" data-html="true" [tooltip]="tooltipData" placement="bottom">{{item.title}}</span>
          <ng-template #tooltipData><p [innerHtml]="createTooltip(item)"></p></ng-template>
        </td>
        <td><input type="checkbox" id="item.code" name="item.code" value="item.code" (change)="fieldsChange($event, item)"></td>
      </tr>
      </tbody>
    </table>