Question

<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是通过knockout传递给displayHearingsCaseID函数的参数，并且为函数内的每一行计算caseIDString。

Answer 1

以下是显示popover的示例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);
        });

Answer 2

以某种方式触发：'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');
        });

   };

Answer 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>

Twitter Bootstrap Popover不会立即出现

3 个答案: