[Fixed] How to get column data as tooltip using angular

Issue

Have table and if I mousemove on columns need to get column data as tooltip, tried below code and getting tooltips. But if we hover on dropdown all options are coming in tooltip. Could you please help me how to get only selected option in tooltip.

  ngOnInit(): void {
    $(document).on("mousemove", "tr td", function () {
      var colVal = $(this).text();
      $(this).prop("title", colVal);
    }); 
  }

Demo

Solution

Instead of using jquery(Jquery is not recommended in angular), directly bind title in HTML itself

<tr *ngFor="let person of persons;let i = index;">
   <td>
      <input [(ngModel)]="person.check" [checked]="isChecked" type="checkbox" class="checkboxCls" name="id" >
   </td>
   <td title="{{person.id}}">{{ person.id }}</td>
   <!-- Bind selected option here -->
   <td title="{{person.test}}">
      <select [disabled]="!person.check?true:null" [(ngModel)]="person.test" title="{{person.test}}" (change)="selected(person.test)">
      <option *ngFor="let prod of ProductHeader" [value]="prod.name" >{{prod.name}}</option>
      </select>
   </td>
   <td title="{{person.test}}">{{ person.test }}</td>
   <td title="person.firstName">{{ person.firstName }}</td>
   <td title="{{person.lastName}}">{{ person.lastName }}</td>
</tr>