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

у меня есть стол. в каждой таблице я хочу, чтобы она показывала всплывающую подсказку через 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>[email protected]</td>
<td>123 fake street</td>
</tr>

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

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

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


jquery qtip
person scarhand    schedule 07.05.2011    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

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').

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

person mu is too short    schedule 07.05.2011

arrow_upward
0
arrow_downward

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

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

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