如何为操作列 ng2-smart-table 添加工具提示答案

【问题标题】：How to add tooltips for action column ng2-smart-table如何为操作列 ng2-smart-table 添加工具提示
【发布时间】：2021-06-28 02:35:42
【问题描述】：

我做了一些与 Ng2-Smart-Table 相关的编码。当我进行自定义按钮实现时，用户体验不佳，因此我想在将鼠标悬停在这些按钮中时添加工具提示。有人有过这样做的经验吗？

我当前的代码如下与操作列相关

      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>' },
  ],
},

【问题讨论】：

我找到了解决方案，顺便说一句，我们可以使用引导切换如下，title: '<i class="nb-edit" (click)="onCreateVnfInstance()" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>',

标签： angular tooltip ng2-smart-table

【解决方案1】：

在你在前端调用的循环中，你必须这样调用：

[matTooltip]= {{ custom.name }}

您必须放置要显示为工具提示的变量。这里我以 custom.name 为例。如果要将标题显示为工具提示，则必须编写 custom.title。

建议你把数组名改成custom。你可以这样调用：

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

【讨论】：