qTip2 loop working but the data information does not change

Question

A few minutes ago I've created a similiar topic as you can see here: qTip2 (tooltip) line break not working which is solved.

But my problem now is another.

Here's an example in http://jsfiddle.net/8LFfL/2/.

If you mousehover the links they all have the same title and the same text, which is incorrect. If for example I debug the title by using console.log(title) the value returned is correct for each item in the loop.

What can be wrong? Thanks.

Answer 1

Your old JS:

$('a').each(function () {
    if ($(this).hasClass('qTip')) {
        var value = $(this).next('div')[0].innerHTML;
        var title = $(this).attr('title');
        $('.qTip').qtip({
            style: {
                classes: 'qtip-bootstrap'
            },
            content: {
                title: title,
                //text: value // The problem is here (on the `text` option)
                text: value
            }
        });
    }
});

Working JS:

$('a').each(function () {
    if ($(this).hasClass('qTip')) {
        var value = $(this).next('div')[0].innerHTML;
        var title = $(this).attr('title');
        $(this).qtip({
            style: {
                classes: 'qtip-bootstrap'
            },
            content: {
                title: title,
                //text: value // The problem is here (on the `text` option)
                text: value
            }
        });
    }
});

The 5th line is the one that needs changing. $('.qTip') selects every single element with that class, and gives them all same values. What you need is to call the qtip on $(this), the current <a>.