Commit 4018fac2 authored by Patrick H. Lauke's avatar Patrick H. Lauke Committed by Mark Otto
Browse files

Expand popover custom container explanation

mention the scenario of popovers inside modals - see https://github.com/twbs/bootstrap/issues/36692#issuecomment-1178261690
parent 6c221aa0
main cleanup-floating-forms dependabot/npm_and_yarn/stylelint-and-stylelint-config-twbs-bootstrap-15.3.0 fod-main-banner github/fork/ChellyAhmed/fix-typo-reboot.md github/fork/ChellyAhmed/offcanvas-scroll-back github/fork/Elysiome/offcanvas-optional-window-resizing github/fork/LunicLynx/support-different-line-height-for-buttons github/fork/Psixodelik/main github/fork/Ronid1/ronid1/offcanvas_static_backdrop github/fork/RyanBerliner/tooltip-accessibility github/fork/SantiagoPVazquez/Feature-default-border-bottom-to-dropdown-item github/fork/Sir-Genius/utils github/fork/Sumit-Singh-8/main github/fork/alpadev/alpadev/call-dispose-on-component-reinstantiation github/fork/astagi/fix/tree-shake-modules github/fork/compnerd/dark-accordion-icon github/fork/dev-ph1l/main github/fork/gregorw/main github/fork/jdelStrother/patch-1 github/fork/jonnysp/form-floating github/fork/jonnysp/independent-offcanvas github/fork/jonnysp/theme-dark-on-card-and-modal-fix github/fork/josefdlange/floating-label-placeholder-opacity github/fork/julien-deramond/main-jd-fix-offset-content github/fork/kyletsang/fix-tooltip-padding github/fork/lekoala/patch-3 github/fork/louismaximepiton/main-kld-lmp-collapse-proposal github/fork/louismaximepiton/main-lmp-card-inner-border-radius-fix github/fork/louismaximepiton/main-lmp-carousel-multiple-images github/fork/louismaximepiton/main-lmp-css-var-init github/fork/louismaximepiton/main-lmp-disabled-floating-label-fix github/fork/louismaximepiton/main-lmp-input-range-fix github/fork/louismaximepiton/main-lmp-shift-color github/fork/louismaximepiton/main-lmp-table-active-tr-fix github/fork/maciek-szn/switch github/fork/nkdas91/accordion github/fork/nstungcom/fix-missing-modal-open-class github/fork/oraliahdz/animation-utilities github/fork/pine3ree/patch-7 github/fork/tgm-git/patch-1 gs-forms gs-toasts-with-animated-progress-bar gs/change-version-dir-on-docs gs/data-must-set-onlu-one-instance gs/docs/fix-drop-down-error gs/popover-fix-doc gs/support-drop-down-in-navbar gs/try-web-components gs/use-event-handler-in-cocmponent gs/use-rollup-replace-for-version jo-docs-thanks-page main-fod-simpler-table-structure main-jd-abbr-title main-jd-add-chips main-jd-add-doc-for-sass-custom-colors main-jd-add-enable-host-to-handle-web-components main-jd-browserstack-fine-tune main-jd-browserstack-updates main-jd-docs-consistent-usage-of-css-sections-step-2 main-jd-fix-docs-headers-in-white main-jd-fix-highlight-docs-border-radius main-jd-fix-placeholder-color-background-params-for-img-markup main-jd-glossary-experiment main-jd-proto-doc-astro main-jd-skip-navigation-component main-jd-stackblitz-for-examples main-jd-upgrade-browserlistrc main-jd-use-host main-lmp-dark-theme-customization main-lmp-handle-scroll-target main-lmp-tab-fix more-darkmode-examples patrickhlauke-issue37428 patrickhlauke-use-of-color-tweaks pr/37590 previous-next-docs-links sticky-thead utilities-functions-mixin v530-dev v6-postcss-custom-media v6-spinner-dots v6/gs/use-floating-ui-in-place-of-popper xmr/dev xmr/docs-png xmr/docs-svgs xmr/js-2 xmr/markdownlint xmr/prepare-530-alpha2 xmr/xo v5.3.0-alpha1 v5.2.3 v5.2.2 v5.2.1
No related merge requests found
Showing with 8 additions and 1 deletion
+8 -1
......@@ -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 |
| --- | --- | --- | --- |
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment