How to add tooltips for action column ng2-smart-table

746 Views Asked by At

I doing some coding related to the Ng2-Smart-Table. When I doing custom button implementation there were bad user experience for user therefore I thought add tool tips when hoovering into those button. Can someone has experience of doing this before.

My current code is as follows related to the action columns

      custom: [
    { name: "healrecord", title: '<i  class="nb-plus-circled"></i>' },
    { name: "terminaterecord", title: '<i class="nb-power"></i>' },
    {
      name: "stoprecord",
      title: '<i  class="nb-square"></i>',
    },
    {
      name: "viewrecord",
      title: '<i class="nb-list"></i>',
    },
    { name: "editrecord", title: '<i class="nb-edit"></i>' },
    { name: "deleterecord", title: '<i class="nb-trash"></i>' },
  ],
},

enter image description here

1

There are 1 best solutions below

0
Sadiquzzaman On

Inside the loop that uou called in front end you have to call like this:

[matTooltip]= {{ custom.name }}

you have to place the variable which you want to show as tooltip. Here I showed custom.name as an example. if you want to show title as tooltip you have to write custom.title.

I suggest you to change the array name to customs. and you can call like this:

<ng-container *ngFor="let custom of customs">
    [matTooltip]= {{ custom.name }}
</ng-container>