9

我有表格行，我在 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'渲染更难看的原因：弹出框粘在我的视口顶部。

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

它包含示例...

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

4

1 回答 1

8

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

触发器：悬停可以很容易地被触发器模仿：手动像这样

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

设置 trigger:manual 使我们能够操纵弹出行为。mouseenter下面的解决方案为/ -events增加了一点延迟mouseleave，然后检查鼠标是否在弹出框内（通过将事件附加到弹出框本身）。如果鼠标在弹出框内，则不会显示新的弹出框，并且不会隐藏活动的弹出框，即使mouseenter在另一个中存在 -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);
});
于 2013-05-17T08:27:58.173 回答