# How to use the Bootstrap 4.4 Popover Container function

**URL:** <https://forum.pinegrow.com/t/how-to-use-the-bootstrap-4-4-popover-container-function/3694>\
**Category:** Bootstrap\
**Created:** [January 18, 2020, 6:37pm UTC](https://forum.pinegrow.com/t/how-to-use-the-bootstrap-4-4-popover-container-function/3694 "2020-01-18T18:37:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Klaus](https://avatars.discourse-cdn.com/v4/letter/k/e99b99/32.png) [@Klaus](https://forum.pinegrow.com/u/Klaus)\
**Post date:** [January 18, 2020, 6:37pm UTC](https://forum.pinegrow.com/t/how-to-use-the-bootstrap-4-4-popover-container-function/3694/1 "2020-01-18T18:37:00Z")

</div>

Bootstrap 4.4 Popover function: There is nothing explained in the instruction manual how I can use the Container option.

This is what I’m trying:  
\<!a href="#" data-trigger=“click” data-placement=“top” data-container=“my infocontent”\>MyLink:\<!/a\>  
\<!div id=“myinfocontent” style=“display: none”\>  
This is my info content which I like to show. I don’t use the Content input line because I like to show a bit more here.  
\<!/div\>

Of course, I use also the automatic generated Script snippet.

---

<div class="post-metadata">

**Author:** ![Marf](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/marf/32/1799_2.png) [@Marf](https://forum.pinegrow.com/u/Marf)\
**Post date:** [January 19, 2020, 11:16am UTC](https://forum.pinegrow.com/t/how-to-use-the-bootstrap-4-4-popover-container-function/3694/2 "2020-01-19T11:16:46Z")

</div>

See this information:

* * *

**Bootstrap Documentation**

> **[Popovers](https://getbootstrap.com/docs/4.4/components/popovers/)**
>
> Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

**Pinegrow Documentation (see section Popover)**

> **[Bootstrap 4 element properties | Pinegrow Web Editor](https://docs.pinegrow.com/docs/bootstrap-visual-editor/bootstrap-properties-common-to-all-elements/bootstrap-4-element-properties/)**
>
> These Bootstrap 4 element properties can be set for any element on the page.

* * *

---

<div class="post-metadata">

**Author:** ![Klaus](https://avatars.discourse-cdn.com/v4/letter/k/e99b99/32.png) [@Klaus](https://forum.pinegrow.com/u/Klaus)\
**Post date:** [January 19, 2020, 6:23pm UTC](https://forum.pinegrow.com/t/how-to-use-the-bootstrap-4-4-popover-container-function/3694/3 "2020-01-19T18:23:57Z")

</div>

Thank you very much. That’s what I’m looking for.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 19, 2020, 7:17pm UTC](https://forum.pinegrow.com/t/how-to-use-the-bootstrap-4-4-popover-container-function/3694/4 "2020-01-19T19:17:13Z")

</div>

> [@Klaus](#):
>
> \<!a href=“#” data-trigger=“click” data-placement=“top” data-container=“my infocontent”\>MyLink:\<!/a\>  
> \<!div id=“myinfocontent” style=“display: none”\>  
> This is my info content which I like to show. I don’t use the Content input line because I like to show a bit more here.  
> \<!/div\>

So, a couple of quick thoughts.

1. I’m assuming that the malformed code - the “!” included are the result of pasting to the forum.
2. You never let BS know that it is a popover. You need to include the “data-toggle” attribute and set it equal to “popover”.
3. I’m not sure if you have enabled popovers on the page. They are not automatically initialized. Either turn them on for the whole page, or just the particular element. If you are using jQuery to do this, make sure the script is AFTER you load jQuery.
4. The “data-container” attribute is to indicate where you want the popover to appear, not what data you want to display.
5. The “data-content” attribute indicates what data to display. If you want more room to add text, you can return the HTML from a function.

---

<div class="post-metadata">

**Author:** ![Klaus](https://avatars.discourse-cdn.com/v4/letter/k/e99b99/32.png) [@Klaus](https://forum.pinegrow.com/u/Klaus)\
**Post date:** [January 21, 2020, 12:34pm UTC](https://forum.pinegrow.com/t/how-to-use-the-bootstrap-4-4-popover-container-function/3694/5 "2020-01-21T12:34:24Z")

</div>

Thank you very much for your reply. Yes, it is not possible to paste HTML code here because it will be executed and not only be shown. I cannot post the final code. Now everything is working very well.