Bootstrap弹出框实现表格行悬停：无法单击弹出框内的链接

Question

Bootstrap弹出框实现表格行悬停：无法单击弹出框内的链接

javascripttwitter-bootstrappopover

9

我有一些表格行，在Twitter Bootstrap的弹出框中显示附加信息。

来自我工作时的交互设计中需要注意几点：

1. 鼠标悬停在行上时必须显示弹出框； 2. 弹出框将包含一个或多个链接。

现在，链接部分是困难的。如果你从表格行移动到包含链接的弹出框，那么弹出框将消失！

我使用以下代码创建弹出框：

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

--假设相关的html，包括链接已经生成并放置在"data-content"属性中。

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

问题是对于表格行来说，从HTML角度来看并不合法。也许这就是为什么"placement：'in bottom'"渲染得更加丑陋的原因：弹出框粘在了我的视口顶部。

请在JSFiddle示例中尝试我的演示。

它包含了一些示例...

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

- Jesper Rønn-Jensen

也许你可以尝试在单击时关闭弹出框，请参见：https://dev59.com/zWox5IYBdhLWcg3wznk0 - Bass Jobsen

@BassJobsen，不确定我是否理解你的意思。首先，这会改变用户与页面的交互方式。这将会让我的网站用户感到困惑。此外，我希望在:hover时打开每个弹出窗口，但你说它们应该在点击后关闭。在那种情况下，当我从一个区域移动鼠标到另一个区域时，比如说十行，十个弹出窗口都会打开。 - Jesper Rønn-Jensen

在:hover时打开弹出框并关闭所有其他弹出框。问题是当移动到弹出框时，可能会触发其他的:hover。我也喜欢@davidkonrad的想法，使用延迟。 - Bass Jobsen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidkonrad · Accepted Answer

显然问题在于弹出窗口做了它应该做的事情。当您将弹出窗口附加到，并让弹出窗口响应悬停 - 并且弹出窗口挂在底部以下 - 您永远无法访问弹出窗口的内容。

可以通过像这样使用trigger:manual轻松模拟触发器:hover

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

设置触发器为手动启用可以操作弹出框的行为。下面的解决方案会在mouseenter / mouseleave事件上添加一些延迟，然后检查鼠标是否在弹出框内（通过向弹出框本身附加事件来实现）。如果鼠标在弹出框内，新的弹出框将不会显示，并且活动的弹出框将不会隐藏，即使在另一个<tr>中也有一个mouseenter事件。fork 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);
});