From: Patrick H. Lauke <redux@splintered.co.uk>
Date: Sat, 30 Jul 2022 23:39:36 +0000 (+0100)
Subject: Expand popover custom container explanation
X-Git-Tag: v5.2.1~42
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=4018fac20ebd0adeb65f6b01a13851098e94309a;p=thirdparty%2Fbootstrap.git

Expand popover custom container explanation

mention the scenario of popovers inside modals - see https://github.com/twbs/bootstrap/issues/36692#issuecomment-1178261690
---

diff --git a/site/content/docs/5.2/components/popovers.md b/site/content/docs/5.2/components/popovers.md
index 8dd28ec55e..87e756434b 100644
--- a/site/content/docs/5.2/components/popovers.md
+++ b/site/content/docs/5.2/components/popovers.md
@@ -83,6 +83,14 @@ const popover = new bootstrap.Popover('.example-popover', {
 })
 ```
 
+Another situation where you'll want to set an explicit custom `container` are popovers inside a [modal dialog]({{< docsref "/components/modal" >}}), to make sure that the popover itself is appended to the modal. This is particularly important for popovers that contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won't be able to focus or activate these interactive elements.
+
+```js
+const popover = new bootstrap.Popover('.example-popover', {
+  container: '.modal-body'
+})
+```
+
 ### Custom popovers
 
 {{< added-in "5.2.0" >}}
@@ -176,7 +184,6 @@ Additionally, while it is possible to also include interactive controls (such as
 Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
 {{< /callout >}}
 
-
 {{< bs-table "table" >}}
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |