Question about hover and Modal

[cltsang]

Greetings.

I am trying to show a tooltip when the user's mouse hovers on a button. It's basically like Twitter web, where when you hover on a user's avatar, it pops up a little box showing a summary of the user's profile.

However, I can't seem to when the Modal display above the original Pressable, it can't capture the hover event.
Please take a look at my codesandbox

Can it be done in pure React Native web? Or if Modal cannot achieve this, is there another way?

Thank you.

[intergalacticspacehighway]

@cltsang As soon as the hovered becomes true -> Modal opens -> Modal overlay covers the entire screen -> hovered becomes false as Pressable loses mouse events.
You'll have to use something that doesn't cover the entire screen. You can create your own Overlay using React Portals.

[gentlefox]

I suggest using react-native-web-hooks providing the means of creating a workaround for the missing pseudo-classes required, with an example described by the author of this package Evan Bacon's gist.