JQuery Qtip не показывает уникальные всплывающие подсказки в нужных местах - PullRequest
Новая
       5

JQuery Qtip не показывает уникальные всплывающие подсказки в нужных местах

2 голосов
/ 08 мая 2011

у меня есть стол.в каждой таблице я хочу, чтобы он показывал всплывающую подсказку через qtip, когда кто-то наводит курсор на TR.

здесь мой код jquery: 

    $('.contacttr').qtip({

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

})

здесь мой html: 

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td>joe@gmail.com</td>
<td>123 fake street</td>
</tr>

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td>joe@gmail.com</td>
<td>123 fake street</td>
</tr>

<tr class="contacttr">
<td class="contactname"><div class="contactinfo">info goes here</div>Persons Name</td>
<td>joe@gmail.com</td>
<td>123 fake street</td>
</tr>

проблема в том, что всплывающие подсказки отображаются только в верхнем ряду, и он показывает содержимое внутри ВСЕХ div-элементов contactinfo, а не только внутри строки, над которой наведен курсор.

Ответы [ 2 ]

4 голосов
/ 08 мая 2011

Я думаю, что ваша проблема в том, что они: 

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

Оцениваются при вызове $('.contacttr').qtip(), а не при активации qTip. Таким образом, this не будет <tr>, а .find не найдет элементы, которые вы ожидаете.

Самое простое решение - обернуть привязку qTip в .each: 

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

Тогда this будет <tr> таким, каким вы хотите его видеть при оценке $this.find('.contactinfo') и $this.find('.contactname').

Возможно, вы сможете использовать callbacks для динамического создания всплывающей подсказки, но я недостаточно знаком с qTip, чтобы знать, насколько хорошо это будет работать.

0 голосов
/ 08 мая 2011

Здесь: http://jsfiddle.net/5hY8F/

Необходимо использовать each(), иначе параметры не будут иметь доступа к атрибутам. 

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