rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

docs: add proper markup on modal's page tooltips ands popovers

Browse Source
This commit is contained in:
GeoSot 2022-05-04 11:05:15 +03:00 committed by Mark Otto
parent f82b2ba20d
commit f02bdf7c52
2 changed files with 7 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
site/assets/js/snippets.js
View File

@ -16,11 +16,10 @@
'use strict'
// Tooltip and popover demos
document.querySelectorAll('.tooltip-demo')
// Tooltip and popover demos
document.querySelectorAll('[data-bs-toggle="tooltip"]')
.forEach(tooltip => {
new bootstrap.Tooltip(tooltip, {
selector: '[data-bs-toggle="tooltip"]'
})
new bootstrap.Tooltip(tooltip)
})
document.querySelectorAll('[data-bs-toggle="popover"]')
@ -79,17 +78,6 @@
})
}
// Demos within modals
document.querySelectorAll('.tooltip-test')
.forEach(tooltip => {
new bootstrap.Tooltip(tooltip)
})
document.querySelectorAll('.popover-test')
.forEach(popover => {
new bootstrap.Popover(popover)
})
// Indeterminate checkbox example
document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
.forEach(checkbox => {

8
site/content/docs/5.1/components/modal.md
View File

@ -325,10 +325,10 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
</div>
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p>
<p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
<p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@ -347,10 +347,10 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
```html
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
<p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
```