Add native shadow DOM support for Joy UI Tooltip component

[jsegeren]

Summary

The Joy UI Tooltip component should have native support for usage within a shadow DOM, similar to the existing support for JoyModal and JoyMenu components. This would allow developers to easily use Tooltips in web components or other shadow DOM contexts without needing to implement complex workarounds.

Examples

Currently, JoyModal and JoyMenu components support shadow DOM usage through a simple prop (in extendTheme): components: { JoyModal: { defaultProps: { container: shadowRootRef.current, }, }, JoyMenu: { defaultProps: { container: shadowRootRef.current, }, }, }

We propose that the JoyTooltip component should have a similar API: components: { JoyTooltip: { defaultProps: { container: shadowRootRef.current, }, }, }

This would allow the Tooltip to render correctly within the shadow DOM while maintaining its positioning relative to the trigger element.

Motivation

Web components and shadow DOM usage are becoming increasingly common in modern web development. As developers build more complex applications using encapsulated components, it's crucial that UI libraries like Joy UI provide seamless support for these scenarios.

Currently, implementing tooltips within a shadow DOM requires complex workarounds that can be error-prone and may not work consistently across different environments. Native support for shadow DOM in the Tooltip component would significantly improve developer experience, reduce potential bugs, and make Joy UI more versatile for a wider range of application architectures.

This feature would align with Joy UI's goal of providing a flexible and powerful component library for modern web applications, and would make it easier for developers to create consistent, accessible user interfaces within shadow DOM contexts.

Search keywords: joy ui, tooltip, shadow dom, web components

[siriwatknp]

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI