Question

我尝试创建一个显示在某个_mapping旁边的弹出框 - 而不是包含弹出式触发器的<div>。

根据bootsrap文档，这可以通过设置＆＃39;容器来实现。选项。

这是jsfiddle：jsfiddle

这是我的HTML：

点击按钮查看Popover

<div>

和js：

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

Popover出现了，但是除了触发器div而不是我想要的div。欢迎任何想法为什么这对我不起作用？

Answer 1

据我所知，container的含义是将popover追加到像body这样的特定元素容器中。所以当你滚动页面时它会影响。这意味着container选项用于在滚动时设置弹出窗口的静态或动态。

如果您需要的功能，请尝试以下代码

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

Answer 2

正确的方法是将data-*属性添加到您希望popover附加到的元素中。见工作jsfiddle

HTML

<a href="#" id="" data-toggle="popover" class="btn btn-primary">pop</a>

<div id="greendiv"
   data-original-title="Title"
   data-content="This is the body of Popover"
   data-placement="right"
     style='background:green;width:100px;height:100px;' >
    green div <br>
    I want popover to appear here to the right: 
</div>

Javascript

$(function () { 
    $("[data-toggle='popover']").on('click', function(e) {
        $('#greendiv').popover('toggle');
    }); 
});

另外，您可以将options用于popover()插件而不是data-*属性。官方文档将为您提供帮助http://getbootstrap.com/javascript/#popovers

Answer 3

看着你的小提琴，popover运行正常，你误解了“数据容器”正在做什么。如果你看看你的小提琴并查看源代码（我正在使用Firebug），你会看到一旦你点击“pop”，popover确实将自己附加到#greendiv，它会被附加到你放置的文本下面在里面。

根据Bootstrap文档：

将popover追加到特定元素。示例：container：'body'。此选项特别有用，因为它允许您定位触发元素附近文档流中的popover - 这将防止弹出物从触发中浮起窗口调整大小时的元素。

这并不是说它会改变弹出窗口的位置。

Answer 4

这不是容器属性的用途。要查看有效的容器属性，您可以按this fiddle检查Rowan Freeman。切换两行并向上和向下滚动以查看差异。

要实现您想要的行为，您必须将与popover相关的数据归因于#greendiv元素，并执行类似

的操作

$(function () { 
    $('.popover-trigger').on('click', function() {
        $('#greendiv').popover('show');
    }); 
});

有关完整示例，请参阅this fiddle。

Answer 5

我点击了 - ＆＃39;切换＆＃39;到按钮并在greendiv使用popover设置。这是一个例子： DEMO-JSFIDDLE

$(function () {
    $("#popThis").on("click", function(){
        $('#greendiv').popover('toggle');
    });

    $('#greendiv').popover({
        title: "Title",
        content: "This is the body of Popover",
        placement:"right",
        trigger: 'manual'
    });
});

容器div上的bootstrap 3 popover

5 个答案: