Как дать всплывающую подсказку для иконки и объединить два столбца в табуляторе

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

Вероятно, есть лучший способ сделать то, что вы делаете, но если вы действительно хотите объединить два столбца, вы можете установить новые столбцы в Tabulator, проверьте эту скрипку

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

  table.setColumns(mergedColumn);

Answer 2

Вы можете добавить всплывающую подсказку с обычным атрибутом заголовка.

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