Toggle wrapped inside Tooltip causes background to always be transparent

[xyba1337]

Essentially whenever the Toggle is wrapped inside a Tooltip, it sets the background of the Toggle to transparent even though the pressed state is active.

Active pressed state without tooltip:

Active pressed state when wrapped inside tooltip:

<TooltipProvider>
    {ToggleButtons.map((val, idx) => {
      return (
        <Tooltip delayDuration={50}>
          <TooltipTrigger asChild>
            <Toggle
              size="sm"
              pressed={editor.isActive(val.isActive)}
              onPressedChange={val.onPressedChange}
              className="toolboxRounded"
            >
              { val.icon }
            </Toggle>
          </TooltipTrigger>
          <TooltipContent>
            <span>{ val.tooltip }</span>
          </TooltipContent>
        </Tooltip>
      );
    })}
</TooltipProvider>

Is this intended and is there possibly any workaround for this?

[OliverGrack]

One workaround would be to remove asChild, not ideal though. Will create 2 elements when tabbing through the page.

[Carpye]

You can add a conditional background style based on the pressed state.

Example using tailwind

<Tooltip delayDuration={50}>
  <TooltipTrigger asChild>
    <Toggle
      size="sm"
      pressed={editor.isActive(val.isActive)}
      onPressedChange={val.onPressedChange}
      className={cn("toolboxRounded", editor.isActive(val.isActive) ? "bg-border" : "")}
    >
      {val.icon}
    </Toggle>
  </TooltipTrigger>
  <TooltipContent>
    <span>{val.tooltip}</span>
  </TooltipContent>
</Tooltip>

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[effectivetom]

I just ran into this issue. Using asChild causes the value of data-state to be overridden, as both components use the same prop. This is the cause of the styles not being updated, as the TW classes depend on data-state.

I wonder if this could be worked around by simply renaming the props to something like data-tooltip-state and data-toggle-state?

[antsorin]

I ran into the same issue. Thanks @effectivetom for the explanation.

Another workaround is to wrap the Toggle inside a div, so that the Tooltip sets the data-state on that div instead of overriding the data-state on the Toggle.

<Tooltip>
  <TooltipTrigger asChild>
    <div>
      <Toggle>
        ...
      </Toggle>
    </div>
  </TooltipTrigger>
  <TooltipContent>
     ...
  </TooltipContent>
</Tooltip>

[effectivetom]

Yeah that works too, although it compromises on semantics and accessibility.

I just realised this is actually a Radix concern, and found these issues which provide some more context:

https://github.com/radix-ui/primitives/discussions/560 https://github.com/radix-ui/primitives/issues/602

This one should probably remain closed.