javascript - Bootstrap popovers 可以不被销毁吗？

Question

是否有可能有一个 Bootstrap (v3) 弹出窗口让它的 div 在页面加载开始时加载并且在切换时不被销毁？

我在 div 中有一个弹出内容:

<div id="popoverContent">
<h1>Stuff</h1>
<p>I'm in a popover!</p>
</div>

还有一个切换弹出窗口的按钮:

<a id="floating_tab" data-toggle="popover" data-placement="left">Button</a>

这是我处理按钮按下的 Javascript 代码:

<script>
var x = false;
$('[data-toggle=popover]').popover({
    content: $('#popoverContent').html(),
    html: true
}).click(function() {
  if (x) {
      $(this).popover('hide');
      x = false;
  }
  else {
    $(this).popover('show');
    x = true;
  }
});
</script>

问题是，当调用 $(this).popover('show'); 时，会创建一个 div。像这样的东西出现在 inspect 元素(chrome)中:

<div class="popover fade left in" role="tooltip" id="popover460185" style="top: 430.5px; left: 2234px; display: block;"><div class="arrow" style="top: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content">
  <h1>Stuff</h1>
  <p>I'm in a popover!</p>
</div></div>

但是当再次点击该按钮时，整个 div 本身将从页面中删除并消失。 是否可以在页面加载期间创建 popover div(虽然隐藏)并且可以在不删除 div 的情况下进行切换？

Answer 1

如评论中所述，目前 Bootstrap 3 无法实现。Popover(工具提示的扩展)是在 show 上动态创建并分离(使用 jQuery.从 hide 上的 DOM 分离)。

可能最好使用您自己的 JavaScript 并简单地使用 Bootstrap 的 CSS。但是，您可以使用 Popover 的事件 API 轻松修补功能 - 以下内容可作为起点:

$(function () {

  var content = $('#popover-content'), // Pre defined popover content.
      popover = $('#popover-anchor').popover();

  popover.on('inserted.bs.popover', function () {
    var instance = $(this).data('bs.popover');
    // Replace the popover's content element with the 'content' element
    instance.$tip = content;
  });

  popover.on('shown.bs.popover', function () {
    var instance = $(this).data('bs.popover');
    // Remove the reference to 'content', so that it is not detached on hide
    instance.$tip = null;
  });

  popover.on('hide.bs.popover', function () {
    // Manually hide the popover, since we removed the reference to 'content' 
    content.removeClass('in');
    content.addClass('out');
  });

});

Codepen