How to make JS tooltips work in Shadow DOM?

user_11581222 0
Viewed 1256

I am using Vue & Bootstrap for an app where I generate web components according to the official Vue documentation (https://cli.vuejs.org/guide/build-targets.html#web-component). For the most part Bootstrap and my business logic is working fine within the #shadow-roots of the web components as if it were in the light DOM.

However, Bootstrap tooltips (which are based on Popper.js https://popper.js.org/) are not working within the Shadow DOM at all. I have also tried to invoke tooltips directly with Popper.js and Tippy.js (https://atomiks.github.io/tippyjs/) in the Shadow DOM encapsulated code, sidestepping Bootstrap altogether, and I still cannot get them to work.

See example here: https://jsfiddle.net/mfep6rg9/

I can guess why -- the 3rd party tooltip libraries most likely aren't finding the target DOM element because it's in a Shadow DOM.

Is there a 3rd party solution out there that accounts for Shadow DOM / web component encapsulation?

shadow-dom web-component vue.js tooltip javascript
2 Answers

Your guess is correct. 3party solutions using document. are not querying shadowDOM.

And there probably is no 3rd party solution as a solution requires either

  • WebComponents to communicate Mouse positions to the outside world.

  • Host querying shadowDOM (and nested shadowDOMs and nested shadowDOMs)

Not much different from an (even more restricted) IFRAME

user_25208000

I had the same problem while building LitElement-based Web Components and found the following solution:

$(this.shadowRoot.querySelectorAll("[data-toggle='tooltip']")).tooltip();

Make sure to target the respective element's shadowRoot and run a querySelectorAll to listen to all shadowRoot child elements that listen to "data-toggle='tooltip'".

user_103551550
Related