Question

我的问题似乎很长，但我想详细提供相关信息，所以请耐心等待。

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

首先我认为插件可能存在一些问题。在一瞬间，我切换到bootstrap内置的工具提示，我面临同样的问题。我可以使用bootstrap工具提示来处理除表格单元格之外的其他元素。

这是我的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'
    });
});

所以上面的内容并不适用于我尝试使用bootstrap工具提示的表格单元格并初始化这样的函数。

$(".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中尚不存在表时，您的初始化将从文档就绪开始。所以$（＆＃39; .customToolTip＆＃39;）找不到那些。

你需要的是制作功能，如下所示：

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

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

并在文档准备就绪时启动它，因此它会在您的文档中找到所有.customToolTip。

然后在将表插入dom之后再次启动此函数并提供容器（表）作为参数。

工具提示不适用于表格单元格

1 个答案: