Keep bootstrap3 popover alive while the popover is being hovered when content reloaded?

Question

I'm trying to keep Bootstrap3 popovers alive while the popovers is being hovered. I'm using the JQuery code bellow suggested in OkezieE's answer from this thread, and its working fine for standard use:

 $(".pop").popover({ trigger: "manual" , html: true, animation:false})
.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);
});

However, I have a sorting function that reloads the content using Ajax, and after the content is reloaded the popovers will not trigger. Anyone have a solution for that?

Answer 1

Give this a try, it should create a popover on any element with the selector .pop even if loaded after the DOM is loaded.

If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.

$("body").popover({ selector: '.pop', trigger: "manual" , html: true, animation:false})
.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);
});