Allow Tooltips/Popovers to work in shadow DOM

js/tests/unit/util.js

@@ -124,4 +124,42 @@ $(function () {
     assert.expect(1)
     assert.ok(Util.supportsTransitionEnd())
   })
+
+  QUnit.test('Util.findShadowRoot should find the shadow DOM root', function (assert) {
+    // Only for newer browsers
+    if (!document.documentElement.attachShadow) {
+      assert.expect(0)
+      return
+    }
+
+    assert.expect(2)
+    var $div = $('<div id="test"></div>').appendTo($('#qunit-fixture'))
+    var shadowRoot = $div[0].attachShadow({
+      mode: 'open'
+    })
+    console.warn($div[0].attachShadow, shadowRoot)
+
+    assert.equal(shadowRoot, Util.findShadowRoot(shadowRoot))
+    shadowRoot.innerHTML = '<button>Shadow Button</button>'
+    assert.equal(shadowRoot, Util.findShadowRoot(shadowRoot.firstChild))
+  })
+
+  QUnit.test('Util.findShadowRoot should return null when attachShadow is not available', function (assert) {
+    assert.expect(1)
+
+    var $div = $('<div id="test"></div>').appendTo($('#qunit-fixture'))
+    if (!document.documentElement.attachShadow) {
+      assert.equal(null, Util.findShadowRoot($div[0]))
+    } else {
+      var sandbox = sinon.createSandbox()
+
+      sandbox.replace(document.documentElement, 'attachShadow', function () {
+        // to avoid empty function
+        return $div
+      })
+
+      assert.equal(null, Util.findShadowRoot($div[0]))
+      sandbox.restore()
+    }
+  })
 })

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]