[英]qTip2 | jQuery “on” method with a different target
I'm using the very handy qTip2 library . 我正在使用非常方便的qTip2库 。
I have a table which regularly gets replaced when making various ajax requests. 我有一张桌子,经常在发出各种ajax请求时被替换。 I would like a qtip to display at the top of a particular column in the table when the cursor hovers over a
<td>
in that column. 当光标悬停在该列中的
<td>
时,我希望qtip显示在表中特定列的顶部。 To achieve this I've used the $('body').on(...)
method with the <th>
as the selector and then setting the selector of "show.target" to be the relevant <td>
via a class assignment. 为此,我使用了
$('body').on(...)
方法,将<th>
用作选择器,然后将“ show.target”的选择器设置为相关的<td>
课堂作业。
I've got it working apart from 2 points: 我得到了2点优势:
<th>
at least once <th>
上之前,不会创建qtip <td>
, it won't hide until I hover and leave the <th>
<td>
,一旦qtip显示出来,它就会隐藏起来,直到我将鼠标悬停并离开<th>
Here is the code: 这是代码:
// Create the tooltips only when document ready
$(document).ready(function () {
var timeOut = setTimeout(function () {
var tableHtml = '<table><tr><th>Col 1</th><th class="col-2-header">Col 2</th></tr><tr><td>Row Label 1</td><td class="col-2">Val 1</td></tr><tr><td>Row Label 2</td><td class="col-2">Val 2</td></tr><tr><td>Row Label 3</td><td class="col-2">Val 3</td></tr></table>';
$('body').append(tableHtml);
}, 100);
$("body").on("mouseover", '.col-2-header', function (e) {
$(this).qtip({
overwrite: false,
position: {
my: 'bottom center',
at: 'top center',
viewport: $(window)
},
content: 'Some test content...',
show: {
event: e.type,
ready: true,
target: $('td.col-2')
}
}, e);
});
});
http://jsfiddle.net/fDavN/6106/ http://jsfiddle.net/fDavN/6106/
Any pointers welcome. 任何指针欢迎。
Thanks, Lee 谢谢李
I made a few changes to your qTip definition. 我对您的qTip定义做了一些更改。 Instead of running .on for the header, it gets run for anything with the .col-2 class (Gave that class to the header as well) and set a position target for the header column.
而不是对标题运行.on,它可以对.col-2类的任何内容(也将该类也提供给标题)运行,并为标题列设置位置目标。
// Create the tooltips only when document ready
$(document).ready(function () {
var timeOut = setTimeout(function () {
var tableHtml = '<table><tr><th>Col 1</th><th class="col-2-header col-2">Col 2</th></tr><tr><td>Row Label 1</td><td class="col-2">Val 1</td></tr><tr><td>Row Label 2</td><td class="col-2">Val 2</td></tr><tr><td>Row Label 3</td><td class="col-2">Val 3</td></tr></table>';
$('body').append(tableHtml);
}, 100);
$("body").on("mouseover", '.col-2', function (e) {
$(this).qtip({
overwrite: false,
position: {
my: 'bottom center',
at: 'top center',
viewport: $(window),
target: $(".col-2-header")
},
content: 'Some test content...',
show: {
event: e.type,
ready: true
}
}, e);
});
});
Edit: This seems like a partial fix as the qTip recreates itself when mousing between cells. 编辑:这似乎是部分修复,因为在单元格之间移动时qTip会重新创建自己。 Might be fixable by playing with the hide: event.
通过玩hide:事件可能可以修复。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.