mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00
Code Issues Releases Wiki Activity

Expand popover custom container explanation

Browse Source 
mention the scenario of popovers inside modals - see https://github.com/twbs/bootstrap/issues/36692#issuecomment-1178261690
This commit is contained in:
Patrick H. Lauke
2022-07-31 00:39:36 +01:00
committed by Mark Otto
parent 6c221aa043
commit 4018fac20e
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
site/content/docs/5.2/components/popovers.md
View File

@@ -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 ### Custom popovers
{{< added-in "5.2.0" >}} {{< 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. Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
{{< /callout >}} {{< /callout >}}
{{< bs-table "table" >}} {{< bs-table "table" >}}
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | --- | --- | --- | --- |