工具提示在表格单元格中不起作用

Question

我的问题可能看起来很长，但我正在尝试详细提供相关信息，所以请多多包涵。

我在我的网站上使用 tooltipster 工具提示插件 (http://iamceege.github.io/tooltipster/)。然而，我的问题与 JS 而不是 tooltipster 插件更相关。我可以轻松地将 tooltip 插件集成到我的网站上，并且它在内容是静态的图像、按钮等上工作得很好。但是，我正在根据 JSON 响应动态填充表格，并且无法在表格单元格上使用工具提示。

首先我认为插件可能有问题。瞬间我切换到引导内置工具提示，我面临同样的问题。除了表格单元格之外，我可以获得引导工具提示来处理其他其他元素。

这是我的 JS，我在其中添加类 customToolTip

function addBetTypeProductsToLegend(table) {
    var betType = $.data(table, 'BetTableData').betType,
        legendRow = $.data(table, 'BetTableData').legendRow,
        productNotFount = true,
        td;
    $.each(betType.products, function(index,value) {
        var betTypeHint = 'betTypeId_' + value.id + '_hint';
        td = element.create('td');
        element.setId(td, value.id);
        element.setClassName(td, 'customToolTip'); // adding customToolTip class
        element.setTitle(td, window[ 'betTypeId_' + value.id + '_hint']); // setting respective title tags
        element.setInnerHtml(td, getBrandBetName(value.name));
        legendRow.appendChild(td);
        productNotFount = false;
    });

    // Racing Specials
    td = element.create('td');
    element.setId(td, betType.id);
    element.setInnerHtml(td, betType.name);

    if (productNotFount) legendRow.appendChild(td);
}

这就是我分配类名和标题属性的方式

var element = {
    create: function(htmlIndentifier) {
        return document.createElement(htmlIndentifier);
    },
    setClassName: function(element, className) {
        element.className = className;
    },
    setTitle: function(element, title) {
    element.title = title;
    }
}

JS插件初始化

$(document).ready(function() {
    $('.customToolTip').tooltipster({
        animation: 'fade',
        delay: 400,
        theme: 'tooltipster-IB',
        touchDevices: false,
        trigger: 'hover'
    });
});

所以上述不适用于我尝试使用引导工具提示并像这样初始化函数的表格单元格。

$(".customToolTip").tooltip({
    placement : 'top'
});

它适用于除表格单元格之外的其他元素。

我也尝试为工具提示设置填充

$('.customToolTip').each(function(e) {
    var p = $(this).parent();
    if(p.is('td')) {
        $(this).css('padding', p.css('padding'));
        p.css('padding', '0 0');
    }
    $(this).tooltip({
        placement: 'top'
    });
});

我关注了其他几个人们在工具提示和表格单元格方面遇到问题的帖子
bootstrap "tooltip" and "popover" add extra size in table
https://github.com/twbs/bootstrap/issues/5687

似乎我稍后处理了布局问题，首先我需要显示自定义工具提示而不是默认标题属性。

Answer 1

当表格在 DOM 中尚不存在时，您的初始化开始于文档准备就绪。所以 $('.customToolTip') 没有找到那些。

你需要做的是函数，像这样：

function BindTooltips(target) {
    target = target || $(document);

    target.find('.customToolTip').tooltipster({
        animation: 'fade',
        delay: 400,
        theme: 'tooltipster-IB',
        touchDevices: false,
        trigger: 'hover'
    });
}

并在文档准备好时启动它，这样它就会在您的文档中找到所有 .customToolTip。

然后在你的表被插入到 dom 之后再次启动这个函数并提供容器（表）作为参数。