Tooltip wrapped toggle buttons break highlight

[joziahg]

For, ToggleButtons wrapped in a tooltip, the toggle highlight doesn't work.

I believe this may be similar to #13206

• [ x] The issue is present in the latest release.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Tooltips break toggle buttons highlighting behavior.

Expected Behavior 🤔

I expect Tooltips to not affect highlighting behavior.

Steps to Reproduce 🕹

https://codesandbox.io/s/lingering-bird-6zrc4?fontsize=14

Context 🔦

I wanted to put a tooltip on the buttons so users know what the buttons do.

Your Environment 🌎

Tech	Version
Material-UI	v4.5.2
React	16.11.0
Browser	firefox 69
TypeScript	n/a

[oliviertassinari]

We have covered this problem a couple of times already. They are 3 possible approaches, 2 you can leverage today.

1. Forward the prop to the write element (use a "prop catcher")
2. Apply the tooltip to the label:

      <ToggleButtonGroup
        value={mode}
        exclusive
        onChange={(e, newValue) => setMode(newValue)}
      >
        <ToggleButton value="kill">
          <Tooltip title="Set mode to kill">
            <span>Kill</span>
          </Tooltip>
        </ToggleButton>

3. For Material-UI to avoid the cloneElement API: Is there a better alternative to cloneElement? #12921.

[oliviertassinari]

@joziahg Yes, I think that the issue you have linked is related, please upvote #12921 if you would like the radio group's solution generalized.

[pavel-klavik]

1. Forward the prop to the write element (use a "prop catcher")

Could you give me a link with some code doing this? I would like to adapt this into our codebase.

[Ironolife]

I got it working with props forwarding

import React, { forwardRef, VFC } from 'react';
import ToggleButton, { ToggleButtonProps } from '@mui/material/ToggleButton';
import Tooltip, { TooltipProps } from '@mui/material/Tooltip';

type TooltipToggleButtonProps = ToggleButtonProps & {
  TooltipProps: Omit<TooltipProps, 'children'>;
};

// Catch props and forward to ToggleButton
const TooltipToggleButton: VFC<TooltipToggleButtonProps> = forwardRef(
  ({ TooltipProps, ...props }, ref) => {
    return (
      <Tooltip {...TooltipProps}>
        <ToggleButton ref={ref} {...props} />
      </Tooltip>
    );
  }
);

export default TooltipToggleButton;

[CWSites]

We are doing this method on our ToggleButton however in adding the wrapping Tooltip it's breaking the ToggleButton styles, they are no longer grouped and instead look like two separate buttons. Do you have a workaround for this or do we need to specifically overwrite the styles to make it appear correct?

Without Tooltip

With Tooltip

[modbender]

I'm starting to think this should be supported by ToggleButton by default
Maybe pass a prop to ToggleButton like tooltip="ButtonText" so it automatically creates a tooltip for it.

[TheMoonDawg]

Agreed with @modbender. That would be more useful than having to manually juggle the props forwarding!

[dmytro-shchurov]

That must be a slot prop, because many projects use their own fancy themed tooltips

[akucharik]

So far I've had success by applying the tooltip inside the ToggleButton, but using absolute positioning to achieve the full hit area of the ToggleButton.

<ToggleButton value={value}>
    <span>Option 1</span>
    <Tooltip title="Option 1 description">
        <span
            style={{
                bottom: 0,
                left: 0,
                position: "absolute",
                right: 0,
                top: 0,
              }}
        ></span>
    </Tooltip>
</ToggleButton>