Allow Tooltips/Popovers to work in shadow DOM

1 files changed, 21 insertions, 1 deletions

diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 436f5c1cd..831f26d0a 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -62,7 +62,12 @@
           </button>
         </p>
       </div>
-      <div id="target" title="Test tooltip on transformed element"></div>
+      <div class="row">
+        <div class="col-sm-3">
+          <div id="target" title="Test tooltip on transformed element"></div>
+        </div>
+        <div id="shadow" class="pt-5"></div>
+      </div>
       <div id="customContainer"></div>
     </div>
 
@@ -72,6 +77,21 @@
     <script src="../../dist/tooltip.js"></script>
     <script>
       $(function () {
+        if (typeof document.body.attachShadow === 'function') {
+          var shadowRoot = $('#shadow')[0].attachShadow({ mode: 'open' })
+          shadowRoot.innerHTML =
+            '<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-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-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom with container option">' +
+            '  Tooltip on top in a shadow dom' +
+            '</button>'
+
+          $(shadowRoot.firstChild).tooltip()
+          $(shadowRoot.getElementById('secondTooltip')).tooltip({
+            container: shadowRoot
+          })
+        }
         $('[data-toggle="tooltip"]').tooltip()
         $('#tooltipElement').tooltip({
           container: $('#customContainer')[0]