jquery qtip not working, but no error in console

Question

I have been stuck for hours, and can't figure out why. What I need to implement is quite simple, I have a number of "tr" and each td has a unique headers name. Based on the headers name, I need a tooltip to be shown for each "td" cell. I have implemented qtip successfully before, so I know how to configure it. But, the problem is qtip is not working at all, even with a simple content. The wired thing is, there is no error message in console, so I have no idea WHY.

Here is the JS:

$(document).ready(function () {

    var hoverElem = null;
    $("table.confirmit-grid.borderseparate tbody tr td").on('click mouseover', function (e) {
        hoverElem = this;
        if ($(hoverElem).attr('headers') == 'non_import_header1') {
            $(hoverElem).qtip({
                content: {
                    text: 'hello'
                }

            });
        }

    });

And the HTML part is in JSFiddle. http://jsfiddle.net/matildayipan/2yztzdgc/

Can anyone help me out? I will really appreciate it~

Answer 1

It seems that

$("table.confirmit-grid.borderseparate tbody tr td").length

returns 0, so the qtip is not applied to any element. The problem arises because of the dot in the class name. It can be avoided by escaping the dot in the selector :

$("table.confirmit-grid\\.borderseparate tbody tr td")

In fact, here is how I would write it (no need to redefine the click/mouseover event, that's automatically done by the qtip function) :

$(document).ready(function () {
var hoverElem = null;
$("table.confirmit-grid\\.borderseparate tbody tr td").each(function( index ) {
    if ($(this).attr("headers") == "non_import_header1") {
        $(this).qtip({
            content: {
                text: 'hello'
            }
        });
    }
});

[EDIT] Why this syntax works :

When you do $("yourSelector").qtip({content:{text:"Hello !"}});, what it does is apply the tooltip plugin to all the elements that match the selector. The plugin constructor that is called does all the work for you and creates the right event handlers so you don't have to do it yourself.

The trouble with your piece of code was that it tried to create a new qtip each time there was a click/mouseover, instead of creating one once and then display it. My guess is that since the event handler creates a new plugin, it prevents the qtips previously created to be displayed, and thus nothing appears.

Note that in this case I used .each() because of the condition $(this).attr("headers") == "non_import_header1", but that was actually lazy of me because I'm pretty sure the attribute condition can be integrated to the elements selector someting like that :

$("table.confirmit-grid\\.borderseparate tbody tr td[headers='non_import_header1']").qtip({
            content: {
                text: 'Hello ! Yay for short code !'
            }
        }
);