brinch brinch - 1 month ago 5
HTML Question

How to make Bootstrap popover appear next to different div?

I want to use Bootstrap to create a popover next to a div I specifiy.

The Bootstrap documentation suggests that I use data-container html attribute for this purpose. Something like: data-container="my-div".

So I first define the div, I want the popover to appear next to:

<div id="hello">
I'd like for the popover to show next to this.
</div>


And then the popover trigger button, with data-container pointing to the div's
hello
id:

<a href="#" id="example" class="btn btn-primary" rel="popover"
data-content="This is the body of Popover"
data-original-title="Creativity Tuts" data-container="#hello">pop
</a>


However, I can't get it to work. The popover keeps showing next to the button.

Here is a fiddle.

Answer

Would it be an option for you to trigger the popover from that button, but have the popover contents inside the #hello element?

Demo

HTML:

<p>Click on button to see Popover</p>
<a href="#" id="example" class="btn btn-primary">pop
</a>
<br/><br/>
<br/><br/>
<div id="hello" data-content="This is the body of Popover"
   data-original-title="Creativity Tuts" rel="popover">
   I'd like for the popover to show next to this.
</div>

Javascript:

$(function () {
    $('#example').click(function() {
        $('#hello').popover('show');
    });
});

CSS:

#hello {
 float:left;
}