Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip content text is invisible #1326

Open
Fadingvision opened this issue Feb 23, 2024 · 7 comments
Open

Tooltip content text is invisible #1326

Fadingvision opened this issue Feb 23, 2024 · 7 comments
Labels
Package: react-email This is the CLI we generally use as just `email` on the temrinal. Type: Bug Confirmed bug Type: Good First Issue Good first issue

Comments

@Fadingvision
Copy link

Describe the Bug

image

Which package is affected (leave empty if unsure)

react-email

Link to the code that reproduces this issue

https://demo.react.email/preview/notifications/github-access-token?view=source

To Reproduce

https://demo.react.email/preview/notifications/github-access-token?view=source

Expected Behavior

Tooltip content text is visible

What's your node version? (if relevant)

No response

@Fadingvision Fadingvision added the Type: Bug Confirmed bug label Feb 23, 2024
@gabrielmfern
Copy link
Collaborator

Seems ok for me, the tooltip seems to appear fine
image

@gabrielmfern gabrielmfern added the Resolution: Can't Reproduce This issue cannot be reproduced label Feb 23, 2024
@Fadingvision
Copy link
Author

@gabrielmfern looked into some details, this bug looks like it is related to os theme, further information:

os info

windows 10
chrome version(121.0.6167.189)

windows light theme:

image

windows dark theme(which looks fine):

image

Looks like the text color should be set to white anyways, hope it helps.

@gabrielmfern gabrielmfern added Package: react-email This is the CLI we generally use as just `email` on the temrinal. and removed Resolution: Can't Reproduce This issue cannot be reproduced labels Feb 27, 2024
@devharipragaz007
Copy link

is the bug still exists? Shall I give it a try?

@gabrielmfern
Copy link
Collaborator

is the bug still exists? Shall I give it a try?

Yup it's still there.
PR's are welcome! Would love to review yours if you do make one.
You also don't have to ask permission to open one either. :)

@ffiona
Copy link

ffiona commented Mar 11, 2024

On Mac OS is the same, depends on the system theme.

Screenshot 2024-03-11 at 16 50 35

@devharipragaz007
Copy link

is the bug still exists? Shall I give it a try?

Yup it's still there. PR's are welcome! Would love to review yours if you do make one. You also don't have to ask permission to open one either. :)

Please assign this to me.

@gabrielmfern gabrielmfern added the Type: Good First Issue Good first issue label Mar 12, 2024
@kaustabhws
Copy link

kaustabhws commented Apr 27, 2024

Screenshot 2024-04-27 210800

Hello, it's my first time commenting on a issue. but I'd like to add something. I think the issue in here
<TooltipPrimitive.Content {...props} className={cn( 'bg-black border border-slate-6 z-20 px-3 py-2 rounded-md text-xs', '${inter.variable} font-sans', )} ref={forwardedRef} sideOffset={sideOffset} > {children} </TooltipPrimitive.Content>

instead of giving bg-black we can set the color based on the theme. I haven't explored the entire code so I'm not sure what is being used for themes, but maybe use external package and conditionally change the bg color, for eg dark:bg-black for dark mode and default bg-white. Forgive me if I'm commenting anything wrong

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: react-email This is the CLI we generally use as just `email` on the temrinal. Type: Bug Confirmed bug Type: Good First Issue Good first issue
Projects
None yet
Development

No branches or pull requests

5 participants