将 Bootstrap 弹出框添加到特定的 div 元素

Posted 2023-05-08

【中文标题】将 Bootstrap 弹出框添加到特定的 div 元素

【英文标题】：Add Bootstrap popover to a specific div element

【发布时间】：2017-11-11 09:57:16

【问题描述】：

我正在尝试将引导弹出窗口添加到包含任意内容的 div 元素中（但我想出的方法不起作用）：

<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')，则弹出框会正确显示。有什么想法吗？

【问题讨论】：

第二个 $ $('$popover-target') 中的一个错字

@guradio 是的，这是一个错字，抱歉已修复。

【参考方案1】：

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

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

【参考方案2】：

$(function()
$('.btn').popover(
      container: "body",
      html: true,
      content: function () 
        return '<div class="popover-message">Hello</div>';
      
    );
    
  
);

$('.btn').click(function()
      $('#btn').popover();
  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<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>