14

in most cases I found on internet, the container was set to 'body'

What I encountered:

bootstrap popover shows on a fixed div content, when you scroll page, popover moves too.

I change the param container to my specific DIV #search-filter-container, nothing changed.

UPDATE:

what now .popover DIV appears within body at last even I set container: '#some-my-div'

  <div class="popover fade right in" style="top: 429.5px; left: 680px; display: block;">
    code details...
  </div>
</body>
hlcfan
  • 313
  • 1
  • 2
  • 10
  • 1
    If you are interested in situations where `container` parameters may be helpful, check out this question http://stackoverflow.com/questions/19448902/changing-the-width-of-bootstrap-popover – Buksy Mar 31 '16 at 07:42

2 Answers2

15

It's hard to know what you're asking, especially because you didn't provide any code examples. Please read How do I ask a good question?

However, to show you an example of container option usage, I have created a JSFiddle.

Comment out each line of javascript to see the different effects (scroll up and down in the result frame). Don't forget to press Run when you change the code.

HTML

<div style="height: 100px;">
    <br />Static text.</div>
<div style="position: fixed; width: 100%;" id="fixed-div">
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." id="popover">Popover</button>
</div>
<div style="height: 2000px;"></div>

Javascript

// comment this
$('[data-toggle="popover"]').popover({container: "body"});

// uncomment this
//$('[data-toggle="popover"]').popover({container: "#fixed-div"});
Community
  • 1
  • 1
Rowan Freeman
  • 15,724
  • 11
  • 69
  • 100
  • hi,sorry for unclearly asking.yes,the usage of `container` is correct as what i thought before.but within my project i took over last week, the param `container` wasn't working, the popover DIV still appears at last line of body tag. – hlcfan May 27 '14 at 06:43
  • 2
    You'll have to be more specific and include code if you want a solution to a problem. No one can help you with *"wasn't working"*. – Rowan Freeman May 27 '14 at 06:50
  • sorry again.my english is not good.I had update my question,please check it out. thanks. – hlcfan May 27 '14 at 08:06
  • 2
    Seems like a good question to me. "What is the purpose of this poorly documented framework" – Captain Prinny Oct 25 '19 at 19:11
5

Use a CSS selector in the container attribute.

When the selected container scrolls, the popover will scroll too, for instance use the opener button as container, or an element near it

HTML

<button type="button" class="btn btn-primary" data-container="#popover-button" data-toggle="popover" ... id="popover-button">Open popover</button>
</div>

JAVASCRIPT

$('#popover-button').popover({container: "#popover-button"});
Luca C.
  • 11,714
  • 1
  • 86
  • 77