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粘在我的视口顶部。

在My example on JSFiddle

中试用我的演示

它包含示例......

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

Answer 1

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

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

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

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

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

1 个答案: