2

This works fine - using this code. The popover is generated, and all is good..

$('[rel="popover"]').popover({
    html: true,
    //selector: '',
    trigger: 'manual',
    container: $(this).attr('id'),
    placement: 'top'
}).on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(this).siblings(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide")
        }
    });
});

However, I'm trying to adapt it so it works on mark up generated on the fly from Ajax calls. This code seems to work(ish) but it appears the popover settings are not being used as all HTML is stripped. Can anyone offer some advice? Much appreciated.

Edit: I've also tried adding selector: '[rel="popover"]', and still no luck

$('body').popover({
    html: true,
    //selector: '',
    trigger: 'manual',
    container: $(this).attr('id'),
    placement: 'top'
}).on("mouseenter", '[rel="popover"]', function () {
    var _this = this;
    $(this).popover("show");
    $(this).siblings(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave",'[rel="popover"]', function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide")
        }
    });
});
Community
  • 1
  • 1
williamsowen
  • 477
  • 1
  • 7
  • 22

0 Answers0