diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2022-07-31 02:39:36 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2022-08-03 21:24:20 +0300 |
commit | 4018fac20ebd0adeb65f6b01a13851098e94309a (patch) | |
tree | 3bc351dfedb0e9791cfc0a95dbdd2301468f4a26 /site/content/docs/5.2/components/popovers.md | |
parent | 6c221aa043e0bd14db31fb047c57c714e92605de (diff) |
Expand popover custom container explanation
mention the scenario of popovers inside modals - see https://github.com/twbs/bootstrap/issues/36692#issuecomment-1178261690
Diffstat (limited to 'site/content/docs/5.2/components/popovers.md')
-rw-r--r-- | site/content/docs/5.2/components/popovers.md | 9 |
1 files changed, 8 insertions, 1 deletions
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 | | --- | --- | --- | --- | |