表行悬停的引导弹出框：无法单击弹出框内的链接

Question

我有表格行，我在 twitter 引导弹出窗口中显示附加信息。

我使用的交互设计中的一些注意事项：

• 将鼠标悬停在行时必须显示弹出框
• 弹出框将包含 1 个或多个链接

现在，链接部分是最难的部分。如果将鼠标从表格行移动到弹出框（包含链接），弹出框将消失！

我正在使用此代码创建弹出框：

var options = {placement: 'bottom', trigger: 'hover', html: true};
$(this).popover()

--假设相关的html包括链接被生成并放入data-content属性

请注意{placement: 'bottom' }。为了使鼠标可以移动到弹出框，我尝试了{placement: 'in bottom'}（添加了in关键字，它在选择器内生成弹出框dom元素）。

问题在于表格行，这在 HTML 方面是不合法的。也许这就是为什么placement: 'in bottom' 变得更加丑陋的原因：弹出框粘在我的视口顶部。

在My example on JSFiddle 试试我的演示

它包含示例...

我的问题是我应该如何定义我的弹出框，以便可以点击链接——考虑到交互设计设置的限制？

Answer 1

问题显然是弹出框做了它应该做的事情。当您将弹出框附加到 <tr> 并让弹出框响应悬停时 - 弹出框挂在 <tr> 的底部下方 - 您将永远无法访问弹出框的内容。

Trigger:hover 很容易被 trigger:manual 模仿

$('table').on('mouseenter', 'tr', function() {
    $(this).popover('show');
});
$('table').on('mouseleave', 'tr', function() {
    $(this).popover('hide');    
});

设置触发器：手动使我们能够操纵弹出行为。下面的解决方案给mouseenter/mouseleave-事件增加了一点延迟，然后检查鼠标是否在弹出框内（通过将事件附加到弹出框本身）。如果鼠标在弹出框内，则不会显示新的弹出框，并且不会隐藏活动的弹出框，即使在另一个 <tr> 中存在 mouseenter-事件。分叉的jsfiddle：http://jsfiddle.net/xZxkq/

var insidePopover=false;

function attachEvents(tr) {
    $('.popover').on('mouseenter', function() {
        insidePopover=true;
    });
    $('.popover').on('mouseleave', function() {
        insidePopover=false;
        $(tr).popover('hide');
    });
}

$('table').on('mouseenter', 'tr', function() {
    var tr=$(this);
    setTimeout(function() {
        if (!insidePopover) {
            $(tr).popover('show');
            attachEvents(tr);
        }
    }, 200);
});

$('table').on('mouseleave', 'tr', function() {
    var tr=$(this);
    setTimeout(function() {
        if (!insidePopover) $(tr).popover('hide');  
    }, 200);
});