Skip to content

Investigate solutions for react-tooltip limitations in shadow DOM #312

@MohammedMaaz

Description

@MohammedMaaz

Problem
When VuiTooltip is used inside a shadow DOM by consumers, react-tooltip can't render the tooltips due to a known limitation.

Moreover, in general, relying on 3rd party libraries relying on querying document to apply tooltips won't work. See: https://stackoverflow.com/questions/61922807/how-to-make-js-tooltips-work-in-shadow-dom

Proposed Solution
One proposed solution would be to accept a custom tooltip provider component as an optional prop to VuiContextProvider to offload the tooltip rendering to consumers in such cases.

Another solution would be to completely let go of react-tooltip in favor a custom tooltip implementation inside VUI that uses a ref based approach as opposed to querying the DOM directly, and leverages VuiPortal to inject tooltip component.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions