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

Question

My question might seems long, but I am trying to give relevant information in detail so please bear with me.

I am using tooltipster tooltip plugin ( http://iamceege.github.io/tooltipster/ ) on my website. However my question is more related to JS instead of tooltipster plug in. I am easily able to integrate the tooltip plugin on my website and it is working just fine on images, buttons, etc where the content is static. However, I am populating tables dynamically based on the JSON response and I can't get the tooltip working on the table cells.

First I thought there might be some problem with the plugin. In a flash I switched to bootstrap inbuilt tooltip and I am facing the same problem. I can get bootstrap tooltip to work on other other elements apart from the table cells.

Here is my JS where I am adding the class 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);
}

This is how I am assigning class name and title attributes

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

JS plugin initialization

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

So the above doesn't apply to the table cell I tried to use bootstrap tooltip and initialize the function like this.

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

It works fine for other elements apart from table cells.

I tried to set padding as well for tooltip as well

$('.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'
    });
});

I followed couple of other posts where people were facing problem with tooltip and table cells
bootstrap "tooltip" and "popover" add extra size in table
https://github.com/twbs/bootstrap/issues/5687

Seems like I have deal with the layout issue later on first I need to show the custom tooltip instead of default title attribute.

Answer 1

Your initialization starts on document ready, when table does not exist in DOM yet. So $('.customToolTip') does not find those.

What you need is to make function, something like this:

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

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

And launch it on document ready, so it will find all .customToolTip in your document.

Then after your table is being inserted into dom launch this function again and provide container (table) as argument.