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

Question

我正在将制表符用于角度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
    });

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

Answer 1

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

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

Answer 2

也许有更好的方法来做您要做的事情，但是如果您真的想合并两列，则可以在Tabulator中设置新列，请检查此小提琴

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

  table.setColumns(mergedColumn);