bootstrap 3 popover on container div

Question

I'm trying to create a popover that appears next to a certain <div> - not the <div> containing the popover trigger.

According to the bootsrap documentation, this can be achieved by setting the 'container' option.

Here is jsfiddle: jsfiddle

Here's my html:

Click on button to see 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>

and js:

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

Popover appears, but alongside the trigger div not the div I want it to. Any ideas welcomed as to why this doesn't work for me ?

Answer 1

As per i know meaning of container is to Appends the popover to a specific element container like body. so it affect when you scroll the page. that means container option is used to set static or dynamic possition of popover while scrolling.

for the functionality that you want please try the following code

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

The right way is to add data-* attributes to the element you want popover append to. See working 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');
    }); 
});

As alternative, you can use options for popover() plugin instead of data-* attributes. The official documentation will help you http://getbootstrap.com/javascript/#popovers