Tooltip: incorrectly calculated left and top position when not appended to body

[metalloid66]

We are building our project with encapsulated web components architecture. E.g, we would have 3 independent web components inside our main application, each component with their own import of PrimeNG lib. In order to achieve this independence of components (avoiding style leaks from different PrimeNG versions in different web components etc.) we are encapsulating the root web components with ShadowDom. Of course, this brings about the errors that come with using PrimeNG components in the ShadowDom.

We are currently testing your library as a solution and most of the components seem to be working fine. However, we are facing issues with the Tooltip component. To avoid leaking the Tooltip to the parent application (as parent application might not have PrimeNG) we are appending the Tooltip somewhere inside of the web component itself. For example appendTo = 'target', or [appendTo]='someWebCompWrapper'. However, it seems like for these situations the Tooltip's position is always miscalculated.

Could you please provide a solution for miscalculated overlays positions (We have only found tooltip's position to be faulty for the time being) with appendTo set to something other than 'body'?

[cmyk1]

Is there any fix for this issue?

[maitrungduc1410]

For your issue, I think:

• some of your css (the one from your web component) override primeng styles for tooltip.
• are you appending tooltip to same shadowRoot component? what I mean is if from component B you target to component A, in this case it may cause issue
• pay attention into where your tooltip is appended to (lets call it target), from that target you have to make sure all primeng css imported, no tooltip style override, and that component is fully visible (without overflow/overlap)

What I found after all of this is, no matter whether you're working with shadowDom or not, 99,99% you should use appendTo=body to avoid any issue with "overlay" components