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

DaisyUI 3.x Tooltip dynamic variant not working #807

Open
fini opened this issue Jun 13, 2023 · 0 comments
Open

DaisyUI 3.x Tooltip dynamic variant not working #807

fini opened this issue Jun 13, 2023 · 0 comments

Comments

@fini
Copy link

fini commented Jun 13, 2023

Sorry for the vague title, but I am not entirely sure what causes this error.

In DaisyUI 3.x the tooltip color variants are set by changing two css variables.
.tooltip-success for example sets them like this, overriding the default colors:

.tooltip& {
  --tooltip-color: hsl(var(--su));
  --tooltip-text-color: hsl(var(--suc));
}

My code used to work in DaisyUI 2.x, but I think it used a different approach, here is a snippet of the code I use:

const variantTooltipStyles = {
  default: tw``,
  primary: tw`tooltip-primary`,
  info: tw`tooltip-info`,
  success: tw`tooltip-success`,
  warning: tw`tooltip-warning`,
  error: tw`tooltip-error`,
}

const StyledToolTip = styled.div(() => [
  tw`tooltip tooltip-bottom`,
  ({ variant }) => variantTooltipStyles[variant],
  // Workaround to force warning variant.
  `& {
    --tooltip-color: hsl(var(--wa));
    --tooltip-text-color: hsl(var(--wac));
  }`,
])

The variant styles are not being injected.
I have included the workaround code, which works, but is not dynamic.

Note: even hardcoding the first style line like so, will not work:

tw`tooltip tooltip-success tooltip-bottom`,
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

1 participant