如何将 CSS 应用于 Tabulator 中的工具提示

Question

我希望我的 Tabulator table 将 CSS 应用于悬停在单元格上时出现的工具提示。每当用户设置 tooltips:true 时，制表符都会添加一个 title 标记。但是，内联应用 CSS 具有挑战性。我做到了：

div[title]:hover:after {
    content:attr(title) ;
    width: 300px ;
    background-color: black ;
    color: #fff ;
    text-align: center ;
    border-radius: 6px ;
    padding: 5px 0 ;

    /* Position the tooltip */
    top: 100%;
    left: 50%;
    margin-left: -60px;
    z-index: 1 ;
}

我还没有确定定位或确定我的风格。您可以从下图中看到当我将鼠标悬停在左上角的单元格上时会发生什么。

我得到两个工具提示——默认的和我自定义的。此外，自定义工具提示在单元格边缘停止。

Answer 1

Tabulator 使用 HTML title 属性来显示工具提示，因此样式取决于浏览器而不是用户可定制。

如果您想要自定义工具提示，那么我建议使用 Custom Formatter 添加第 3 方工具提示生成插件。

如何将 CSS 应用于 Tabulator 中的工具提示

How to apply CSS to tooltips in Tabulator

html

css

tabulator