diff options
author | GeoSot <geo.sotis@gmail.com> | 2022-05-04 11:05:15 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2022-05-07 06:44:06 +0300 |
commit | f02bdf7c5276eecb754343b4cf0e17e385512806 (patch) | |
tree | 74a2247576e1145cc6c04ff68e3c679e64a50efd /site | |
parent | f82b2ba20d50d49a1554f4fa2891e3e65760fa98 (diff) |
docs: add proper markup on modal's page tooltips ands popovers
Diffstat (limited to 'site')
-rw-r--r-- | site/assets/js/snippets.js | 18 | ||||
-rw-r--r-- | site/content/docs/5.1/components/modal.md | 8 |
2 files changed, 7 insertions, 19 deletions
diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 61aec7d085..4a9a9dc8f6 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -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 => { diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index 2db62d3bb4..762a569bff 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -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> ``` |