javascript - 将 Bootstrap 弹出窗口添加到特定的 div 元素

Question

我正在尝试向包含任意内容的 div 元素添加一个 Bootstrap 弹出窗口(但我想出的方法不起作用):

<div id="popover-target">
   <h3>I need a popover</h3>
      <p>
        This is some content for the section
        that needs to be explained by the popover.
      </p>
</div>
<button class="btn">Show popover</button>

<script>
    $(function(){
        $('.btn').click(function(){
            $('#popover-target').popover({title: 'Title', content: 'Test Content', container: 'body', placement: 'right'});
        });
    });
</script>

如果我将 $('#popover-target') 更改为 $('.btn')，则弹出窗口会正确显示。有什么想法吗？

Answer 1

如果您在单击按钮后将鼠标悬停在 #popover-target div 上，您刚刚初始化了按钮单击时的弹出窗口，它应该可以正常工作。如果你想在鼠标悬停在按钮点击后显示它，你可以使用 .popover('show')喜欢:

$('.btn').click(function() {
  $('#popover-target').popover({
      trigger: 'hover',
      title: 'Title',
      content: 'Test Content',
      placement: 'bottom'
    })
    .popover('show');
});