如何为图标提供工具提示并在制表符中合并两列答案

【问题标题】：How to give tooltip for icon and merge two columns in tabulator如何为图标提供工具提示并在制表符中合并两列
【发布时间】：2026-01-30 20:55:02
【问题描述】：

我正在使用制表符作为 Angular 6 中的树视图结构。我想将两列组合为一列，并为列中可用的图标分配工具提示

以下是我为参考设计的屏幕

sampleColumn= [
    { formatter: this.historyIcon, width: 40, align: "center", cellClick: this.showHistory.bind(this), headerSort: false },
    { formatter: this.mapIcon, width: 40, align: "center", cellClick: this.showMap.bind(this), headerSort: false },
    { field: 'locName', title: 'Location', headerSort: false }
  ];

mapIcon = function (cell, formatterParams) { //plain text value
    return "<i class='fa fa-map-marker'></i>";
  };

historyIcon = function (cell, formatterParams) { //plain text value
    return "<i class='fa fa-tasks'></i>";
  };

var sampleTable = new Tabulator("#child-item-tabulator", {
      layout: "fitColumns",
      columns: this.sampleColumn,
      placeholder: "Fetching data",
      virtualDomBuffer: 400,
      dataTree: true
    });

如何对格式化程序列进行分组并为图标分配工具提示

【问题讨论】：

标签： angular tabulator

【解决方案1】：

您可以添加带有常规标题属性的工具提示。

historyIcon = function (cell, formatterParams) { //plain text value
   return "<i class='fa fa-map-marker' title='My tooltip text'></i>";  
};

【讨论】：

是的，我已经做到了。但我想将两列合并为一列并在附近显示这两个图标

【解决方案2】：

可能有更好的方法来做你正在做的事情，但如果你真的想合并两列，你可以在 Tabulator 中设置新列，检查这个小提琴

https://jsfiddle.net/dota2pro/wLxefn9b/11/

  table.setColumns(mergedColumn);

【讨论】：