带有引导工具提示的制表符答案

【问题标题】：Tabulator with Bootstrap tooltip带有引导工具提示的制表符
【发布时间】：2021-03-30 12:54:14
【问题描述】：

我必须在 Tabulator 中集成引导工具提示。但我显示了两个工具提示。

window.addEventListener("load", () => {
  const data = [
    {id: 1, column1: "abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"},
    {id: 2, column1:"abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"},
    {id: 3, column1: "abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"}
  ];

  window.table = new Tabulator("#tablediv", {
    data: data,
    persistence: false,
    movableColumns: true,
    responsiveLayout: 'hide',
    columns: [
      {title: "id", field: "id"},
      {title: "column1", field: "column1", headerTooltip: "tooltip1"},
      {title: "column2", field: "column2", headerTooltip: "tooltip2"},
      {title: "column3", field: "column3", headerTooltip: "tooltip3"},
      {title: "column4", field: "column4", headerTooltip: "tooltip4"}     
    ]
  }); 
   $('[title]').tooltip();
});

示例：https://jsfiddle.net/chemarf/673eny9o/

我看到“mouseenter”事件触发了“setTooltip”函数。有办法改变这个吗？

感谢您的帮助。

【问题讨论】：

标签： bootstrap-4 tabulator

【解决方案1】：

问题是每次您将鼠标悬停在标题被重置时，您需要通过从 tooltipsHeader 返回 false 来告诉制表器不要再次设置标题，您还必须从列定义中删除 headerTooltip。

试试这个：

window.addEventListener("load", () => {
  const data = [
    {id: 1, column1: "abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"},
    {id: 2, column1:"abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"},
    {id: 3, column1: "abcdefghijklmn", column2: "abcdefghijklmn",column3:"abcdefghijklmn",column4:"abcdefghijklmn"}
  ];

  window.table = new Tabulator("#tablediv", {
    data: data,
    persistence: false,
    movableColumns: true,
    responsiveLayout: 'hide',
    columns: [
      {title: "id", field: "id"},
      {title: "column1", field: "column1"},
      {title: "column2", field: "column2"},
      {title: "column3", field: "column3"},
      {title: "column4", field: "column4"}     
    ],
    tooltipsHeader: ( column ) =>
    {
        const customToolTips = {
          column1 : 'ToolTip1',
          column2 : 'ToolTip2',
          column3 : 'ToolTip3',
          /* column4 : 'ToolTip4', */
       };
       
        try
        {
            if ( ! ( column.getDefinition().field in customToolTips ) )
            {
                // No tooltip is defined
                return false;
            }

            const header = column.getElement();
            if ( typeof header.dataset.originalTitle !== 'undefined' )
            {
                // BS tooltip already set
                return false;
            }

            return customToolTips[ column.getDefinition().field ];
        }
        catch ( exception )
        {
            console.error(exception);
            return false;
        }

    },
    tableBuilt: () =>
    {
        try
        {
            $('#tablediv .tabulator-col[title]').tooltip();
        }
        catch ( exception )
        {
            console.error(exception);
            return false;
        }
    }
  }); 

});

【讨论】：