Question

i have a table. in each table i want it to show a tooltip via qtip when someone hovers over a TR.

heres my jquery code:

    $('.contacttr').qtip({

    content: {
        text: $(this).find('.contactinfo')
    },
    position: {
        my: 'bottom center',
        at: 'center',
        target: $(this).find('.contactname')
    }

})

heres my html:

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td>[e-mail]</td>
<td>123 fake street</td>
</tr>

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td>[e-mail]</td>
<td>123 fake street</td>
</tr>

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td>[e-mail]</td>
<td>123 fake street</td>
</tr>

the problem is that the tooltips are only showing up in the top row, and its showing the content inside ALL of the contactinfo div’s rather than just the one inside the row which is being hovered over.

Answer 1

I think your problem is that these:

text: $(this).find('.contactinfo')
// ...
target: $(this).find('.contactname')

Are being evaluated when you call $('.contacttr').qtip() rather than when the qTip is activated. So, this won’t be the <tr> and .find won’t find the single elements that you expect it to.

The easiest solution would be to wrap your qTip binding in an .each:

$('.contacttr').each(function() {
    var $this = $(this);
    $this.qtip({
        content: {
            text: $this.find('.contactinfo')
        },
        position: {
            my: 'bottom center',
            at: 'center',
            target: $this.find('.contactname')
        }
    });
});

Then this will be the <tr> that you want it to be when you evaluate $this.find('.contactinfo') and $this.find('.contactname').

You might be able to use the callbacks to build the tooltip dynamically but I’m not familiar enough with qTip to know how well that would work.