Skip to content

Commit

Permalink
Expand popover custom container explanation
Browse files Browse the repository at this point in the history
mention the scenario of popovers inside modals - see #36692 (comment)
  • Loading branch information
patrickhlauke authored and mdo committed Aug 3, 2022
1 parent 6c221aa commit 4018fac
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion site/content/docs/5.2/components/popovers.md
Expand Up @@ -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" >}}
Expand Down Expand Up @@ -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 |
| --- | --- | --- | --- |
Expand Down

0 comments on commit 4018fac

Please sign in to comment.