表行悬停的Bootstrap弹出窗口:无法单击popover内的链接

Question

我有表行,我在twitter bootstrap popover中显示其他信息.

我使用的交互设计中的一些注释:

• 当您悬停行时,必须显示弹出窗口
• 弹出窗口将包含一个或多个链接

现在,链接部分是困难的部分.如果将鼠标从表格行移动到弹出框(包含链接),则弹出窗口将消失!

我用这段代码创建了popover:

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

- 假设生成包含链接的相关html并将其放入data-content属性中

注意这个{placement: 'bottom' }.为了能够将鼠标移动到弹出窗口,我尝试了{placement: 'in bottom'}(添加了in关键字,它在选择器内生成popover dom元素).

问题是表行,这在HTML方面并不合法.也许这就是为什么placement: 'in bottom'呈现更丑陋的原因:popover粘在我的视口顶部.

在JSFiddle的My example中尝试我的演示

它包含了例子......

我的问题是我应该如何定义我的popover,以便可以点击链接 - 考虑到交互设计设置的限制？

Answer 1

问题是,popover做了应该做的事情.当您将<tr>弹出窗口附加到弹出窗口时,让弹出窗口响应悬停 - 并且弹出窗口挂在<tr>底部下方 - 您永远无法访问弹出窗口的内容.

触发:可以通过触发器轻松模仿悬停:这样的手动

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

设置触发器:手动使我们能够操纵弹出行为.下面的解决方案为mouseenter/ mouseleave-events 添加了一点延迟,然后检查鼠标是否在popover内(通过将事件附加到popover本身).如果鼠标位于弹出窗口内,则不会显示新的弹出mouseenter框,并且即使在另一个中存在-event ,也不会隐藏活动弹出窗口<tr>.Forked 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);
});