Bootstrap 个带有制表符的工具提示

Question

所以我想让我的 Tabulator 工具提示与我的其余 Bootstrap 5 个工具提示内联。

常规工具提示工作：

let myToolTip = function(cell){
    let name = cell.getRow().getData().name
    let supplier = cell.getRow().getData().supplier
    return "Name: " + name + "\nSupplier: " + supplier
}

但是，它们是浏览器默认设置。我希望它看起来更漂亮一点，并与网站上的其他工具提示一致。

我试过 table:

中的行格式化程序

rowFormatter:function(row){
    row.getElement().setAttribute("data-bs-toggle", "tooltip")
    row.getElement().setAttribute("data-bs-placement", "top")
    row.getElement().setAttribute("title", "Test")
}

但是什么也没有出现。 DOM 实际上是被操纵的，属性显示在 table 行上，但工具提示没有出现。

我认为 tooltipGenerationMode:"hover" 可能会有点运气，但我猜想 Bootstrap 工具提示在 Tabulator 范围之外运行。当我的鼠标移动到与 Bootstrap 工具提示冲突的 table 行时，肯定发生了什么事。

我的另一个想法是为每个单元格 return html 自定义格式化程序，但这开始变得有点复杂。

网站上的工具提示正在运行。

任何解决这个问题的人（请使用纯 JS！），我很想听听你是如何解决这个问题的。

Answer 1

好的，这有点令人费解，但我必须在 rowFormatter 中初始化工具提示。

import { Tooltip } from 'bootstrap';

// inside the tabulator instance
rowFormatter:function(row){
    var data = row.getData();
    var id = row.getData().id
    let elId = "fermall-" + id
    row.getElement().setAttribute("id", elId)
    row.getElement().setAttribute("title", "Test ID: " + id)
    var exampleEl = document.getElementById(elId)
    var tooltip = new Tooltip(exampleEl)
},

这也允许动态工具提示生成（即当 Tabulator 内容更改时），这比运行页面加载时的工具提示生成器要好。

我在没有 data-bs-toggle 属性的情况下测试了它，它似乎仍然有效。

Bootstrap 个带有制表符的工具提示

Bootstrap tooltips with Tabulator

javascript

tabulator