twitter-bootstrap 表格行悬停的 Bootstrap 弹出框：无法单击弹出框内的链接

Bootstrap popovers for table row hover: Not possible to click link inside popover

提问by Jesper R?nn-Jensen

I have table rows where I display additional information in a twitter bootstrap popover.

我有表格行，我在 twitter bootstrap popover 中显示附加信息。

A few notes from the interaction design I work with:

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

• Popovers must show up when you hover the row
• Popovers will contain 1 or more links

• 当您悬停该行时，必须显示弹出框
• 弹出窗口将包含 1 个或多个链接

Now, the link part is the hard part. If you move the mouse from the table row, to the popover (which contains the link), the popover will disappear!

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

I am creating the the popover with this code:

我正在使用以下代码创建弹出窗口：

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

-- which assumes relevant html including the link is generated and put in data-contentattribute

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

Notice this {placement: 'bottom' }. In order to make it possible to move the mouse to the popover, I tried {placement: 'in bottom'}(added inkeyword, which generates popover dom element inside the selector).

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

Problem is for table rows, that is not really legal HTML-wise. Perhaps that's why placement: 'in bottom'renders even more ugly: The popover glues to the top of my viewport.

问题在于表格行，这在 HTML 方面并不是真正合法的。也许这就是placement: 'in bottom'渲染更难看的原因：弹出窗口粘在我的视口顶部。

Try my demo in My example on JSFiddle

在 JSFiddle 上的我的示例中尝试我的演示

It contains the examples ...

它包含示例...

My question is how should I define my popover, so that it is possible to click the links -- given the limitations set by the interaction design?

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

回答by davidkonrad

The problem is obvisously that the popover does what it is supposed to do. When you attach popovers to <tr>'s, and let the popover respond to hover - and the popover hangs below the <tr>'s bottom - you will never be able to reach the content of the popover.

问题很明显，popover 做了它应该做的事情。当您将 popover 附加到<tr>'s，并让popover响应悬停时 - 并且 popover 悬挂在<tr>'s 底部下方 - 您将永远无法到达 popover 的内容。

Trigger:hover can easily be mimicked by trigger:manual like this

Trigger:hover 可以很容易地被 trigger:manual 这样模仿

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

Setting trigger:manual enable us to manipulate the popover behaviour. The solution below adds a little delay to the mouseenter/ mouseleave-events, and then check if the mouse is inside the popover (by attaching events to the popover themselves). If the mouse is inside a popover, a new popover will not be shown, and the active popover will not be hidden, even if there has been a mouseenter-event in another <tr>. Forked jsfiddle : http://jsfiddle.net/xZxkq/

设置 trigger:manual 使我们能够操纵弹出窗口行为。下面的解决方案给mouseenter/ mouseleave-events添加了一点延迟，然后检查鼠标是否在 popover 内（通过将事件附加到 popover 本身）。如果鼠标在 popover 内，则不会显示新的 popover，并且不会隐藏活动的mouseenterpopover ，即使在 another 中已经存在-event <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);
});