fix: add trick to support tooltip selector usage on dynamic created tooltips that utilize `title` attribute (#36914)

1 files changed, 40 insertions, 14 deletions

diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 779ac1aaf..9a65640b4 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -66,42 +66,68 @@
         <div id="shadow" class="pt-5"></div>
       </div>
       <div id="customContainer"></div>
+
+      <div class="row mt-4 border-top">
+        <hr>
+        <div class="h4">Test Selector triggered tooltips</div>
+        <div id="wrapperTriggeredBySelector">
+          <div class="py-2 selectorButtonsBlock">
+            <button type="button" class="btn btn-secondary bs-dynamic-tooltip" title="random title">Using title</button>
+            <button type="button" class="btn btn-secondary bs-dynamic-tooltip" data-bs-title="random title">Using bs-title</button>
+          </div>
+
+        </div>
+        <div class="mt-3">
+          <button type="button" class="btn btn-primary" onclick="duplicateButtons()">Duplicate above two buttons</button>
+        </div>
+      </div>
     </div>
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
       if (typeof document.body.attachShadow === 'function') {
-        var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
+        const shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
         shadowRoot.innerHTML =
-          '<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom">' +
+          '<button id="firstShadowTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom">' +
           '  Tooltip on top in a shadow dom' +
           '</button>' +
-          '<button id="secondTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom with container option">' +
+          '<button id="secondShadowTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom with container option">' +
           '  Tooltip on top in a shadow dom' +
           '</button>'
 
-        var firstChildTooltip = new bootstrap.Tooltip(shadowRoot.firstChild)
-        var secondChildTooltip = new bootstrap.Tooltip(shadowRoot.getElementById('secondTooltip'), {
+        new bootstrap.Tooltip(shadowRoot.firstChild)
+        new bootstrap.Tooltip(shadowRoot.getElementById('secondShadowTooltip'), {
           container: shadowRoot
         })
       }
 
-      var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]')
-      for (const tooltipEl of tooltipElements) {
-        new bootstrap.Tooltip(tooltipEl)
-      }
 
-      var tooltipElement = document.getElementById('tooltipElement')
-      var tooltipElementInstance = new bootstrap.Tooltip(tooltipElement, {
-        container: document.getElementById('customContainer')
+      new bootstrap.Tooltip('#tooltipElement', {
+        container: '#customContainer'
       })
 
-      var target = document.getElementById('target')
-      var targetTooltip = new bootstrap.Tooltip(target, {
+      const targetTooltip = new bootstrap.Tooltip('#target', {
         placement : 'top',
         trigger : 'manual'
       })
       targetTooltip.show()
+
+      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl=>  new bootstrap.Tooltip(tooltipEl))
     </script>
+
+    <script>
+      new bootstrap.Tooltip('#wrapperTriggeredBySelector', {
+        animation: false,
+        selector: '.bs-dynamic-tooltip'
+      })
+
+      function duplicateButtons() {
+        const buttonsBlock = document.querySelector('.selectorButtonsBlock')// get first
+        const buttonsBlockClone = buttonsBlock.cloneNode(true)
+        buttonsBlockClone.innerHTML+= new Date().toLocaleString()
+       document.querySelector('#wrapperTriggeredBySelector').append(buttonsBlockClone)
+      }
+    </script>
+
   </body>
 </html>