容器div上的bootstrap 3 popover

Question

我正在嘗試創建一個出現在某個<div>旁邊的彈出窗口 - 而不是包含彈出窗口觸發器的<div> 。

根據bootsrap文檔，這可以通過設置'container'選項來實現。

這是jsfiddle： jsfiddle

這是我的HTML：

單擊按鈕以查看Popover

<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選項用於在滾動時設置彈出窗口的靜態或動態。

對於您想要的功能，請嘗試以下代碼

 $(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');
    }); 
});

或者，您可以使用popover()插件的options而不是data-*屬性。 官方文檔將幫助您http://getbootstrap.com/javascript/#popovers

Answer 3

看着你的小提琴，popover運行正常，你誤解了“數據容器”正在做什么。 如果你看看你的小提琴並查看源代碼（我正在使用Firebug），你會看到一旦你點擊“pop”，popover確實將自己附加到#greendiv，它會被附加到你放置的文本下面在里面。

根據Bootstrap文檔：

將popover追加到特定元素。 示例：container：'body'。 此選項特別有用，因為它允許您將彈出窗口放置在觸發元素附近的文檔流中 - 這將防止彈出窗口在窗口大小調整期間從觸發元素浮動。

這並不是說它改變了popover的位置。

Answer 4

這不是容器屬性的用途。 要查看行動中的容器屬性，您可以查看Rowan Freeman的 這個小提琴 。 切換兩條線並向上和向下滾動以查看差異。

要實現您想要的行為，您必須將與#greendiv相關的數據歸結為#greendiv元素，並執行類似的操作

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

看一下完整的例子。

Answer 5

我將click-'toggle'綁定到按鈕並在greendiv上使用popover-settings。 這是一個例子： 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'
    });
});