Twitter Bootstrap Popover 不会立即出现答案

【问题标题】：Twitter Bootstrap Popover does not appear immediatelyTwitter Bootstrap Popover 不会立即出现
【发布时间】：2013-11-01 23:20:13
【问题描述】：

<td><span data-bind="text: ID, event: { mouseover: $parent.displayHearingsCaseID }" class="hearingIDCell"></span></td>

在上面表格单元格的鼠标悬停事件上，我正在调用显示弹出框的 displayHearingsCaseID 函数。

$(event.currentTarget).popover({ content: caseIDString, trigger:'hover',title: "Case ID" });

但我注意到，在多次悬停表格单元格时，会出现弹出框。为什么它没有立即出现？

event是通过敲除传递给displayHearingsCaseID函数的参数，函数内的每一行都会计算caseIDString。

【问题讨论】：

标签： twitter-bootstrap knockout.js popover

【解决方案1】：

这是一个显示弹出框的示例 javascript 代码，

        $(function () {
            var showPopover = function () {
                $(this).popover('show');
            }
            , hidePopover = function () {
                $(this).popover('hide');
            };

            $('#tbName').popover({
                content: 'Enter first three letters of name for search',
                trigger: 'hover',
                placement:'top'
            })
            .focus(showPopover)
            .blur(hidePopover)
            .hover(showPopover, hidePopover);
        });

【讨论】：

【解决方案2】：

不知何故触发器：'悬停'不起作用。使用 trigger:'click'，弹出框会立即出现在表格单元格的 mouseover 事件上。但是我不得不在使用 hover 时隐藏之前显示的弹出框：'click'。

vm.displayHearingsCaseID = function (hearing, event) {
        if (hearing.CaseIDs() == null) return;
        $(event.currentTarget).popover({ content: hearing.CaseIDs(), trigger: 'click', title: "Case ID" }).mouseout(function (e) {
            $(this).popover('hide');
        });

   };

【讨论】：

【解决方案3】：

@user2585299 的回答让我朝着正确的方向前进，但如果您使用“手动”触发器然后明确“显示”弹出框，这会更有意义。

vm.displayPopover = function (obj, event) {
    $(event.currentTarget).popover({
        content: obj.some_attr,
        trigger: 'manual',
        title: "Title"
    }).mouseout(function (e) {
        $(this).popover('hide');
    }).popover('show');
};

在您的标记中：

<span data-bind="text:foo, event:{mouseover:$parent.displayPopover}"></span>

【讨论】：