Lillian Erin Freeman Lillian Erin Freeman - 1 month ago 11
HTML Question

I am trying to create a popover that stays open by ID

I found this result (How can I keep bootstrap popover alive while the popover is being hovered?) that works for one of my popovers, but I have multiple popover events targeted by ID and am wondering how I can apply this either to all of them or to each one. Here is an example of some of the code snippets that I am using.

here is the 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>


Here is the 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 Source

If you want to apply the behavior to all popovers, you can select them by their data-toggle attribute. And if you have a consistent naming for your data- attribute where you store the content URL, you can also easily find and load it from the common function.

<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);
    });
});