どこにでもブートストラップのポップオーバーを有効にして、それらを開いたままにしておいてください

Question

この結果（How can I keep bootstrap popover alive while the popover is being hovered?）は私のポップオーバーの1つに有効ですが、IDを対象とする複数のポップオーバーイベントがあり、それらのすべてまたはそれぞれに以下は、私が使用しているコードスニペットの例です。ここ

は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

あなたはすべてのpopoversにビヘイビアを適用する場合は、あなたが彼らの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); 
    }); 
});