在任何地方启用引导弹出窗口并在悬停时保持打开状态

Question

我发现此结果 (How can I keep bootstrap popover alive while the popover is being hovered?) 适用于我的一个弹出框，但我有多个由 ID 定位的弹出框事件，我想知道如何将其应用于所有事件或每个事件。这是我正在使用的一些代码 sn-ps 的示例。

这里是html：

<label class="checkbox">
  <input type="checkbox" value="" />Body of Delusion<a data-bodyofdelusion="{% static 'pathfinder/html/sleepingGoddess/bodyOfDelusion.html' %}" data-toggle="popover" id="bodyOfDelusion">&#9660;</a>
</label>
<label class="checkbox">
  <input type="checkbox" value="" />Call the Soul's Blade<a data-callthesoulsblade="{% static 'pathfinder/html/sleepingGoddess/callTheSoulsBlade.html' %}" data-toggle="popover" id="callTheSoulsBlade">&#9660;</a>
</label>

这里是javascript：

function loadContent(callTheSoulsBlade) {
    return $('<div>').load(callTheSoulsBlade, function (html) {
        parser = new DOMParser();
        doc = parser.parseFromString(html, "text/html");
        return doc.querySelector('h4').outerHTML + doc.querySelector('body').outerHTML;
    })
};

$(document).ready(function () {
    $("#callTheSoulsBlade").popover({
        trigger: "hover focus",
        container: 'body',
        html: true,
        content: function () {
            return loadContent($(this).data('callthesoulsblade'))
        }
    });
});

function loadContent(bodyOfDelusion) {
    return $('<div>').load(bodyOfDelusion, function (html) {
        parser = new DOMParser();
        doc = parser.parseFromString(html, "text/html");
        return doc.querySelector('h4').outerHTML + doc.querySelector('body').outerHTML;
    })
};

$(document).ready(function () {
    $("#bodyOfDelusion").popover({
        trigger: 'manual',
        container: 'body',
        html: true,
        animation: false,
        content: function () {
            return loadContent($(this).data('bodyofdelusion'))
        }
    }).on("mouseenter", function () { // This is the section from the link I provided.
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 300);
    });
});

Answer 1

如果您想将该行为应用于所有弹出框，您可以通过它们的data-toggle 属性来选择它们。如果您对存储内容 URL 的 data- 属性有一致的命名，您还可以轻松地从通用函数中找到并加载它。

<label class="checkbox">
  <input type="checkbox" value="" />Body of Delusion<a data-staticurl="{% static 'pathfinder/html/sleepingGoddess/bodyOfDelusion.html' %}" data-toggle="popover" id="bodyOfDelusion">&#9660;</a>
</label>
<label class="checkbox">
  <input type="checkbox" value="" />Call the Soul's Blade<a data-staticurl="{% static 'pathfinder/html/sleepingGoddess/callTheSoulsBlade.html' %}" data-toggle="popover" id="callTheSoulsBlade">&#9660;</a>
</label>

$(document).ready(function () {
    $('[data-toggle="popover"]').popover({
        trigger: 'manual',
        container: 'body',
        html: true,
        animation: false,
        content: function () {
            return loadContent($(this).data('staticurl'))
        }
    }).on("mouseenter", function () {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function () {
        var _this = this;
        setTimeout(function () {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 300);
    });
});