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

Light mode tooltips use dark mode theme #1438

Open
2 tasks done
lancegliser opened this issue Jun 26, 2024 · 2 comments
Open
2 tasks done

Light mode tooltips use dark mode theme #1438

lancegliser opened this issue Jun 26, 2024 · 2 comments

Comments

@lancegliser
Copy link

  • I have searched the Issues to see if this bug has already been reported
  • I have tested the latest version

Steps to reproduce

  1. Go to https://flowbite-react.com/docs/components/tooltip#trigger-type
  2. Click on "Tooltip click"
  3. Review classes

Current behavior

It appears there is a theme mismatch for tooltips in light mode.
Image from: https://flowbite-react.com/docs/components/tooltip#theme

image

style.light should be: border border-gray-200 bg-white text-gray-900.
style.auto should be: border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white

The inspector seems to indicate that we're getting style.dark:

image

style.dark is bg-gray-900 text-white dark:bg-gray-700

Expected behavior

White background tooltips with dark text

@SutuSebastian
Copy link
Collaborator

I think there's a misunderstanding here, when we're talking about light, dark and auto tooltip we're talking about the style of it, not if we're in light or dark mode in tailwind.

Here's a screenshot of the flowbite Tooltip

Screenshot 2024-06-27 at 11 42 36

Now here's some screenshots of the flowbite-react Tooltip

Screenshot 2024-06-27 at 11 43 22

Notice the style prop

Screenshot 2024-06-27 at 11 43 37

@lancegliser
Copy link
Author

I believe I did miss that. Apologies, it even is documented. Though, a couple concerns about even that:

The docs for that section state:

Use the style prop to change the style of the tooltip. The default style is light and you can also use dark.

That does not appear to be the default however:
image

I checked, and my flowbite-theme-mode is set to light.

I also wonder if the right default might be auto, though that's different than a bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants