用悬停触发另一个项目的弹出窗口

Question

我正在使用 Twitter Bootstrap 构建一个网络应用程序。当上一个单元格中的输入悬停时，我还想显示输入的弹出窗口。我目前调用 $('input').popover();（我可能会指定更多，但现在没问题）。

html:

<tr>
    <td><input id="client-id" type="text"></td>
    <td><input id="client-name" type="text" tabindex="0" data-toggle="popover" data-trigger="hover" data-content="this is a popover"></td>
</tr>

我希望 #client-name 的弹出框在悬停 #client-code 时也显示。我可以通过调整 javascript 来实现吗？或者我可以使用数据切换类型属性来实现吗？

Answer 1

您可以在 #client-name 和 #client-id mouseover() 上手动触发弹出框。然后在 mouseleave() 上隐藏弹出框，如果新目标不是 #client-name 或 #client-id 之一：

$('#client-name, #client-id').mouseover(function() {
    $('#client-name').popover('show');
});    
$('#client-name, #client-id').mouseleave(function(e) {
    var id=$(e.relatedTarget).attr('id');
    if (id!='client-name' && id!='client-id') $('#client-name').popover('hide');
});

演示 -> http://jsfiddle.net/xwjfgnjj/

更新。我猜你 "wildcard jQuery id selector" 的意思是 *-name？您可以使用 attributeEndsWith selector 之类的东西，例如 $('[id$="-id"]') 来获取所有 id 以 -id 结尾的元素。以下与上面的答案相同，但在多行上，假设 <input> 的 id 以 -id 和 -name 结尾：

$('[id$="-id"], [id$="-name"]').mouseover(function() {
    var id='#'+$(this).attr('id').split('-')[0]+'-name';
    $(id).popover('show');
});    
$('[id$="-id"], [id$="-name"]').mouseleave(function(e) {
    var label = $(this).attr('id').split('-')[0],
        id=$(e.relatedTarget).attr('id');
    if (id!=label+'-name' && id!=label+'-id') $('#'+label+'-name').popover('hide');
});

演示 -> http://jsfiddle.net/LtL1gL0e/

用悬停触发另一个项目的弹出窗口

Trigger another item's popover with hover

popover

twitter-bootstrap