jquery qtip 未在正确的位置显示独特的工具提示

发布于 2024-11-05 20:20:32 字数 1454 浏览 3 评论 0原文

我有一张桌子。在每个表中，当有人将鼠标悬停在 TR 上时，我希望它通过 qtip 显示工具提示。

这是我的 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>

问题是工具提示仅显示在顶行中，并且它显示所有 contactinfo div 内的内容，而不仅仅是悬停在行内的内容。

原文

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>[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>

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乜一 2024-11-12 20:20:32

我认为你的问题是这些：

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

当你调用 $('.contacttr').qtip() 时而不是激活 qTip 时正在评估。因此，this 不会是并且 .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 将是您想要的当您评估 $this.find('.contactinfo') 和 $this.find('.contactname') 时。

您也许可以使用回调动态构建工具提示，但我'我对 qTip 不太熟悉，不知道它的效果如何。

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.

回复收藏 0 原文

浅紫色的梦幻 2024-11-12 20:20:32

这里： http://jsfiddle.net/5hY8F/

您需要使用 each() 或参数将无法访问属性。

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

Here: http://jsfiddle.net/5hY8F/

You need to use each() or the parameters will not have access to the attributes.

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

回复收藏 0 原文

~没有更多了~