Question

I’m having an issue using the qTip plugin with jQuery. I’ve created a js fiddle to see what it’s doing. I’m not sure exactly how to fix this (the link is after the description of the issue)

So I have what’s going to be a check list. You’ll see three <tr> w/ a tooltip on each. If the task is not done the tool tip says “task not complete”. If the task is done the tooltip says “task complete.”

When you click on “toggle” it’s supposed to change the <span> in the <tr> to fade in/out and toggle a class and change the tooltip from “complete” to “not complete” and vice versa.

Everything else seems to work properly. It changes the class, it fades in/out, and it even changes the title attribute.

The problem is that the qTip plugin only changes the tooltip in the cell directly to the right of the toggle. It doesn’t change the tooltip in the following two cells.

Everything seems to be in order for it to work properly. Any ideas what’s going on? This is driving me crazy!!

JS Fiddle

Answer 1

Two possibilities:

1) Instead of

.attr('title', 'This task is not yet complete.');

use

.qtip('option', {'content.text': 'This task is not yet complete.'});

qTip actually copies the title attribute (it does not bind to it) when initialized, so in order to change qTip you need to alter it via qTip methods.

2) Set qTip’s content to a jQuery object. For example add data-qtip attribute to your titled elements which will be (for example) an id of qtip content’s container (add additional div for each qtip):

$('[data-qtip]').each(function() {
    var q = $(this).attr('data-qtip');
    var content = $('#'+q);

    $(this).qtip({
        content: content, // here we reference the jQuery object
        position: {
            my: 'bottom center',
            at: 'top center'
        },
        style: { classes: 'ui-tooltip-dark ui-tooltip-rounded' }
    }
});

Now changing the content of divs will change the qtip (because this is actually a binding).

Personally I think that the second solution is better. It gives you nice control over qTip and it worked really well for me when I worked on dynamic tooltips (for example tooltip with an interactive chart).