Javascript 将引导popover添加到特定的div元素

我正在尝试向包含任意内容的div元素添加一个bootstrap popover，如下所示（但我提出的方法不起作用）：

我需要一个爆米花

这是本节的一些内容
这需要用流行音乐来解释。

展示府绸
$（函数（）{
$（'.btn'）。单击（函数（）{
$（'#popover target'）.popover（{title:'title'，content:'Test content'，container:'body'，placement:'right'}）；
});
});

---

如果我将

$（'#popover target'）

更改为

$（'.btn'）

，则popover显示正确。有什么想法吗？

您刚刚在单击按钮时初始化了popover，如果您在单击按钮后将鼠标悬停在

#popover target

div上，该按钮应该可以正常工作。如果您希望在单击按钮并将鼠标悬停在其上后显示它，您可以使用：

$（函数（）{
$（'.btn'）.popover({
容器：“主体”，
是的，
内容：功能（）{
返回“你好”；
}
});
});
$（'.btn'）。单击（函数（）{
$（'#btn'）.popover（）；
});

我需要一个爆米花

这是本节的一些内容
这需要用流行音乐来解释。

Show popover
是第二个
$
是
$（“$popover target”）
@guradio是的，这是一个打字错误，抱歉修复了它。
<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>

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