I have one datatable. how to get tooltip while hovering on table cells? Tried the below type, the tooltip is populating. How to get the same using angular?
$(document).on("mousemove", "tr td", function () {
var colVal = $(this).text();
$(this).prop("title", colVal);
});
You can achive that pretty easy with implementing bootstrap. something like this should do the trick:
<tbody>
<tr *ngFor="let person of persons">
<td data-container="body" data-toggle="tooltip" data-placement = "bottom" title="{{yourTooltip.content}}" >
<input type="checkbox" [disabled]="person.firstName === 'Superman'"
class="checkboxCls" [value]="person.checked" [checked]="person.checked"
name="id" (change)="person.checked = !person.checked">
</td>
<td data-container="body" data-toggle="tooltip" data-placement = "bottom" title="{{yourTooltip.content}}">{{ person.id }}</td>
<td data-container="body" data-toggle="tooltip" data-placement = "bottom" title="{{yourTooltip.content}}">{{ person.firstName }}</td>
<td data-container="body" data-toggle="tooltip" data-placement = "bottom" title="{{yourTooltip.content}}">{{ person.lastName }}</td>
</tr>
</tbody>
Don't forget to always add data-container="body" otherwise the tooltip will move the table cells to the right a bit on hover.
