为每个单元格制作自定义工具提示

Question

我想在悬停时显示一个行变量值（"company" 作为工具提示）。

我已经尝试在返回值的 table 声明中声明 "tooltips" 自定义函数。

tooltips: function (cell) {
        let data = cell.getRow();
        return "Value of " + data.company;
      }

完整代码可用at this fiddle

我想在鼠标悬停时显示公司变量的值，即 Alpha、Beta、Gamma 等。

Answer 1

试试这个：

tooltips: function (cell) {
        let data = cell.getRow();
        return "Value of " + data._row.data.company;
      }

Answer 2

const tableDataNested = [{
    group: "Backend Engineer A",
    name: "Sourced",
    applied: 300,
    screened: 40,
    interviewed: 5,
    company: "Alpha"
  },
  {
    group: "Backend Engineer A",
    name: "Referred",
    applied: 3,
    screened: 1,
    interviewed: 0,
    company: "Beta"
  },
  {
    group: "Backend Engineer A",
    name: "University",
    applied: 4,
    screened: 2,
    interviewed: 1,
    company: "Gamma"
  },
  {
    group: "Backend Engineer B",
    name: "Sourced",
    applied: 1000,
    screened: 140,
    interviewed: 55,
    company: "Delta"
  },
  {
    group: "Backend Engineer B",
    name: "Referred",
    applied: 30,
    screened: 11,
    interviewed: 2,
    company: "Epsilon"
  },
  {
    group: "Backend Engineer B",
    name: "University",
    applied: 40,
    screened: 22,
    interviewed: 10,
    company: "Phi"
  },
];

const table = new Tabulator("#example-table", {
  data: tableDataNested,
  dataTree: true,
  dataTreeStartExpanded: true,
  groupBy: "group",
  columnCalcs: "table",
  tooltips: function(cell) {
    const company = cell.getRow().getData().company
    return "Value of " + (company) ? company : '' ;
  },
  columns: [{
      title: "Name",
      field: "name",
      responsive: 0
    },
    {
      title: "Applied",
      field: "applied",
      bottomCalc: "sum"
    },
    {
      title: "Screened",
      field: "screened",
      bottomCalc: "sum"
    },
    {
      title: "Interviewed",
      field: "interviewed",
      bottomCalc: "sum"
    },
  ],
});

<head>

  <link href="https://unpkg.com/tabulator-tables@4.3.0/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.3.0/dist/js/tabulator.min.js"></script>
</head>

<body>
  <div id="example-table"></div>
</body>

为每个单元格制作自定义工具提示

Making custom Tool-tip for each cell

tabulator