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


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);



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;">
      <input [(ngModel)]="person.check" [checked]="isChecked" type="checkbox" class="checkboxCls" name="id" >
   <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>
   <td title="{{person.test}}">{{ person.test }}</td>
   <td title="person.firstName">{{ person.firstName }}</td>
   <td title="{{person.lastName}}">{{ person.lastName }}</td>

Leave a Reply

(*) Required, Your email will not be published