Question

我正在使用Twitter Bootstrap构建一个webapp。我想在上一个单元格中的输入悬停时显示输入的弹出窗口。我现在调用$('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()上的popover，如果当然新目标不是#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');
});

演示 - ＆gt;的 http://jsfiddle.net/xwjfgnjj/

<强>更新即可。我猜你用“通配符jQuery id选择器”意味着类似*-name的东西？您可以使用attributeEndsWith selector之类的内容，例如$('[id$="-id"]')来获取id以-id结尾的所有元素。以下内容与上面的答案相同，但在多行上，假设<input>的{{1}}以id和-id结尾：

-name

演示 - ＆gt;的 http://jsfiddle.net/LtL1gL0e/

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

1 个答案: