Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

the usage of parameter container in bootstrap popover?

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>
like image 409
hlcfan Avatar asked May 27 '14 05:05

hlcfan


People also ask

How does bootstrap popover work?

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.

What is the difference between tooltip and popover?

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.

Why we use Popper min JS in bootstrap 5?

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.

How do I style bootstrap popover?

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">...' });


1 Answers

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"});
like image 134
Rowan Freeman Avatar answered Oct 21 '22 06:10

Rowan Freeman