qTip2 | jQuery "on" method with a different target

Question

I'm using the very handy qTip2 library.

I have a table which regularly gets replaced when making various ajax requests. I would like a qtip to display at the top of a particular column in the table when the cursor hovers over a <td> in that column. To achieve this I've used the $('body').on(...) method with the <th> as the selector and then setting the selector of "show.target" to be the relevant <td> via a class assignment.

I've got it working apart from 2 points:

• The qtip isn't created until I hover over the <th> at least once
• Once the qtip displays when I hover over the <td>, it won't hide until I hover and leave the <th>

Here is the code:

// Create the tooltips only when document ready
$(document).ready(function () {

    var timeOut = setTimeout(function () {
        var tableHtml = '<table><tr><th>Col 1</th><th class="col-2-header">Col 2</th></tr><tr><td>Row Label 1</td><td class="col-2">Val 1</td></tr><tr><td>Row Label 2</td><td class="col-2">Val 2</td></tr><tr><td>Row Label 3</td><td class="col-2">Val 3</td></tr></table>';
        $('body').append(tableHtml);
    }, 100);

    $("body").on("mouseover", '.col-2-header', function (e) {
        $(this).qtip({
            overwrite: false,
            position: {
                my: 'bottom center',
                at: 'top center',
                viewport: $(window)
            },
            content: 'Some test content...',
            show: {
                event: e.type,
                ready: true,
                target: $('td.col-2')
            }
        }, e);
    });

});

http://jsfiddle.net/fDavN/6106/

Any pointers welcome.

Thanks, Lee

Answer 1

I made a few changes to your qTip definition. Instead of running .on for the header, it gets run for anything with the .col-2 class (Gave that class to the header as well) and set a position target for the header column.

New jsFiddle

// Create the tooltips only when document ready
$(document).ready(function () {

    var timeOut = setTimeout(function () {
        var tableHtml = '<table><tr><th>Col 1</th><th class="col-2-header col-2">Col 2</th></tr><tr><td>Row Label 1</td><td class="col-2">Val 1</td></tr><tr><td>Row Label 2</td><td class="col-2">Val 2</td></tr><tr><td>Row Label 3</td><td class="col-2">Val 3</td></tr></table>';
        $('body').append(tableHtml);
    }, 100);

    $("body").on("mouseover", '.col-2', function (e) {
        $(this).qtip({
            overwrite: false,
            position: {
                my: 'bottom center',
                at: 'top center',
                viewport: $(window),
                target: $(".col-2-header")
            },
            content: 'Some test content...',
            show: {
                event: e.type,
                ready: true
            }
        }, e);
    });

});

Edit: This seems like a partial fix as the qTip recreates itself when mousing between cells. Might be fixable by playing with the hide: event.