javascript - 容器 div 上的 bootstrap 3 popover

Question

我正在尝试创建一个出现在某个 <div> 旁边的弹出窗口- 不是 <div>包含弹出触发器。

根据 bootsrap 文档，这可以通过设置 'container' 选项来实现。

这是 jsfiddle:jsfiddle

这是我的 html:

点击按钮查看弹出框

<a href="#" id="" class="btn btn-primary"
    data-toggle="popover"
    data-container="#greendiv"
    data-original-title="Title"
    data-content="This is the body of Popover"
    data-placement="right"  >pop
</a>
<div id="reddiv" style='background:red;width:100px;height:100px;'>  
    red div 
</div>
<div id="greendiv" style='background:green;width:100px;height:100px;' >
    green div <br>
    I want popover to appear here to the right: 
</div>

和 js:

$(function () { 
    $("[data-toggle='popover']").popover();   
});

Popover 出现，但触发 div 旁边不是我想要的 div。欢迎任何关于为什么这对我不起作用的想法？

Answer 1

据我所知，container 的含义是将 popover 附加到特定的元素容器，如 body。所以它会影响你滚动页面的时间。这意味着 container 选项用于在滚动时设置 popover 的静态或动态位置。

对于您想要的功能，请尝试以下代码

$(function() {
  $("#test").click(function() {
    $("[data-toggle='popover']").popover('toggle');
  });
});

#greendiv {
    background:green;width:100px;height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" id="test" class="btn btn-primary">pop
</a>
<div id="reddiv" style='background:red;width:100px;height:100px;'>
  red div
</div>
<div id="greendiv" data-toggle="popover" data-original-title="Title" data-content="This is the body of Popover" data-placement="right">
  green div
  <br>I want popover to appear here to the right:
</div>