Menu
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>
409
The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.
Tooltip: use tooltips to show a short text to respondents when they hover over a word or icon. Popover: use popovers to show a longer text, or when you want to have a link to an external web page. It is shown when the respondent clicks on a word or icon.
You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper in order for popovers to work! Popovers require the tooltip plugin as a dependency. Popovers are opt-in for performance reasons, so you must initialize them yourself.
If you have multiple popovers on your page and only want to style one of them, you can leverage the popover's template option to add another class: $("#myElement"). popover({ template: '<div class="popover my-specific-popover" role="tooltip">...' });
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.
<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>
// comment this
$('[data-toggle="popover"]').popover({container: "body"});
// uncomment this
//$('[data-toggle="popover"]').popover({container: "#fixed-div"});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
