Tooltips do not work on elements inside Shadow DOM

[ericcarino]

I'm trying to add a tooltip to a button that resides inside a shadow DOM. Unfortunately, does not work. I traced the problem down to this snippet of code inside bootstrap.js.

Tooltip.prototype.show = function show() {
      var _this22 = this;

      if ($(this.element).css('display') === 'none') {
        throw new Error('Please use show on visible elements');
      }

      var showEvent = $.Event(this.constructor.Event.SHOW);
      if (this.isWithContent() && this._isEnabled) {
        if (this._isTransitioning) {
          throw new Error('Tooltip is transitioning');
        }
        $(this.element).trigger(showEvent);

        var isInTheDom = $.contains(this.element.ownerDocument.documentElement, this.element);

        if (showEvent.isDefaultPrevented() || !isInTheDom) {
          return;
        }

isInTheDom is false because jquery.contains doesn't find the element, which I assume is because it resides inside the shadow DOM. If I manually set this value to true, the tooltip works perfectly. See my screenshot below.

To access my JSBin example, use the link below.
http://jsbin.com/qukeye/2/edit?html,js,output

[Johann-S]

That's true as we use jQuery and jQuery access to the DOM, Currently Bootstrap do not handle Shadow DOM.

I made a CodePen with our latest release (beta 2) : https://codepen.io/Johann-S/pen/YERLxV

EDIT :

It's totally doable to fix our JS to allow folk to use Bootstrap in shadow DOM, but it seems our CSS do not work 😟

BTW it's not very well supported see : https://caniuse.com/#feat=shadowdom

/CC @mdo @andresgalante @XhmikosR @bardiharborow

[andresgalante]

The web is going toward Webcomponents, I think it's important to enable users to implement bootstrap with the ShadowDom

[ericcarino]

@Johann-S What is the CodePen supposed to demonstrate? Were you able to get the tooltip to work? I've tried on Chrome and Safari and I don't see it working.

[Johann-S]

Nothing but it's better to use the latest release which do not use Tether 😂

[LMOkino]

Will this problem be fixed? If so, when do you think it will be fixed? Our product would like to use this feature if it gets fixed soon.

[Johann-S]

I made a branch (v4-dev-johann-shadow) which allow Tooltips/Popovers to work on Shadow dom see my commit
if the other core members accept that I'll continue my work

[mdo]

@Johann-S I'm fine supporting it—seems to make sense that we do.

[LMOkino]

@Johann-S Have your changes been committed yet?

[LMOkino]

@Johann-S Just pinging you to see what the status is of this issue. Please let us know what's going on and when this may be fixed.

[Johann-S]

I'm waiting for an approval of @mdo, @XhmikosR or @bardiharborow on #25150

[gfan95]

Hi @Johann-S, any updates on this? How long do approvals usually take?

[pashvin]

Is this still waiting for approval?

[Johann-S]

No I have to do some rework and rebase my branch