Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !36867

Docs: expand popover custom container explanation

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Patrick H. Lauke requested to merge patrickhlauke-docs-popover into main 2 years ago
  • Overview 2
  • Commits 1
  • Pipelines 0
  • Changes 1

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

Compare
  • main (base)

and
  • latest version
    060218c0
    1 commit, 2 years ago

1 file
+ 8
- 1

    Preferences

    File browser
    Compare changes
site/content/docs/5.2/components/popovers.md
+ 8
- 1
  • View file @ 060218c0

  • Edit in single-file editor

  • Open in Web IDE


@@ -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 |
| --- | --- | --- | --- |
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference: kahun/awesome-sysadmin!35
Source branch: patrickhlauke-docs-popover

Menu

Explore Projects Groups Snippets