tooltip doesn't work in a table cell

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.

If there is a way to manually show the tooltips without binding them to elements this would be a good use case for delegate — Chris, Mar 26 '14 at 14:03

score 3 · Accepted Answer · answered Mar 26 '14 at 14:03

3

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.

answered Mar 26 '14 at 14:03

mr. Pavlikov

982
5
7

Thanks, wouldn't it be the same if I call the function BindTooltips(); and launch it on document ready same as what I wrote in my question. What I would like to know how do I launch the function again after the table is inserted into DOM with argument (table) – 0xburned Mar 26 '14 at 14:21
Your code is obfuscated a little bit on your site, so I cant quite tell you where exactly to put function call. Still I see no problem. The flow is: 1) you retrieve some data 2) you add rows to table 3) you are done, call function here – mr. Pavlikov Mar 26 '14 at 14:30
alright. I will try to implement this. I will let you know if it works and accept the answer. – 0xburned Mar 26 '14 at 14:36
Accepted your answer. Thanks mate. – 0xburned Mar 28 '14 at 08:48

tooltip doesn't work in a table cell

1 Answers1