Allow Tooltips/Popovers to work in shadow DOM

Author: Johann-S

js/src/tooltip.js

@@ -246,8 +246,9 @@ const Tooltip = (($) => {
       if (this.isWithContent() && this._isEnabled) {
         $(this.element).trigger(showEvent)
 
+        const shadowRoot = Util.findShadowRoot(this.element)
         const isInTheDom = $.contains(
-          this.element.ownerDocument.documentElement,
+          shadowRoot !== null ? shadowRoot : this.element.ownerDocument.documentElement,
           this.element
         )
 

js/src/util.js

@@ -136,6 +136,25 @@ const Util = (($) => {
           }
         }
       }
+    },
+
+    findShadowRoot(element) {
+      // Can find the shadow root otherwise it'll return the document
+      if (typeof element.getRootNode === 'function') {
+        const tmpRoot = element.getRootNode()
+        return tmpRoot instanceof ShadowRoot ? tmpRoot : null
+      }
+
+      if (element instanceof ShadowRoot) {
+        return element
+      }
+
+      // when we don't find a shadow root
+      if (!element.parentNode) {
+        return null
+      }
+
+      return Util.findShadowRoot(element.parentNode)
     }
   }
 

js/tests/unit/util.js

@@ -55,4 +55,24 @@ $(function () {
     id2 = Util.getUID('test')
     assert.ok(id !== id2, id + ' !== ' + id2)
   })
+
+  QUnit.test('Util.findShadowRoot should find the shadow DOM root', function (assert) {
+    // Only for newer browsers
+    if (typeof document.body.attachShadow !== 'function') {
+      assert.expect(0)
+      return
+    }
+
+    assert.expect(2)
+    var $div = $('<div id="test"></div>').appendTo($('#qunit-fixture'))
+    var shadowRoot = $div[0].attachShadow({
+      mode: 'open'
+    })
+
+    assert.equal(shadowRoot, Util.findShadowRoot(shadowRoot))
+
+    shadowRoot.innerHTML = '<button>Shadow Button</button>'
+
+    assert.equal(shadowRoot, Util.findShadowRoot(shadowRoot.firstChild))
+  })
 })

js/tests/visual/tooltip.html

@@ -47,7 +47,12 @@ <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
           Tooltip with HTML
         </button>
       </p>
-      <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>
 
     <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
@@ -57,6 +62,21 @@ <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
 
     <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()
         $('#target').tooltip({
           placement : 'top',