From: GeoSot <geo.sotis@gmail.com>
Date: Wed, 4 May 2022 08:05:15 +0000 (+0300)
Subject: docs: add proper markup on modal's page tooltips ands popovers
X-Git-Tag: v5.2.0-beta1~34
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f02bdf7c5276eecb754343b4cf0e17e385512806;p=thirdparty%2Fbootstrap.git

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

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>
 ```