MUI next Tooltip does not show on hover

Question

I use Material-UIv1.0.0-beta.34 Tooltip with Checkbox and FormControlLabel, actually when I hover to the label on Checkbox in one case the tooltip shows as expected on another hand when I create a new one component(custom) with FormControlLabel and Checkbox inside it looks the tooltip does not work as expected.

https://codesandbox.io/s/n33p76n28p

Answer 1

The Tooltip will work properly if you wrap the Checkbox in a div like so:

<Tooltip title="This tooltip works great">
  <div>
    <Checkbox label="This tooltip works on both text and checkbox." />
  </div>
</Tooltip>
<Tooltip title="This tooltip does not work">
  <Checkbox label="This tooltip does not work hovering on text, only hovering on checkbox." />
</Tooltip> 

The Cause

The Tooltip component works by responding to events on its children components (onMouseEnter, onMouseLeave, and a couple of others). It registers to those events by applying props to the top-level children.

When you wrap the Checkbox in a div, the div receives the onMouseEnter and onMouseLeave props and so the hover works properly.

However, when the you do not have a wrapping div, your custom Checkbox receives onMouseOver and onMouseLeave as part of its props. You take these props and spread them into the MuiCheckbox like so:

<FormControlLabel
  control={<MuiCheckbox {...props} />}
  label={label ? label : ""}
/>

So, you're effectively applying onMouseOver and onMouseLeave only to the MUICheckbox itself, and not to the label. So the hover only works on the Checkbox and not the label.

If you wanted, you could also fix this problem by spreading the props throughout the whole custom component:

export const Checkbox = ({ error, helperText, ...props }) => {
  // Capture all of the other props in other
  let { disabled, label, ...other } = props;
  let icon;

  if (disabled) icon = <Info color="disabled" />;
  else if (error) icon = <Warning color="error" />;

  // Spread the other props throughout the top-level div
  return (
    <div {...other}>
      <div>
        <FormControlLabel
          control={<MuiCheckbox {...props} />}
          label={label ? label : ""}
        />
        {!!helperText && (
          <FormHelperText error={error} disabled={disabled}>
            {!!icon && icon}
            {helperText}
          </FormHelperText>
        )}
      </div>
    </div>
  );
};

I didn't suggest that solution originally because it can change the logic of your component if you're not careful, while a wrapping div should be pretty safe.

Answer 2

If anyone is curious, this solution proposed by @JulesDupont also works for GatsbyImage:

<IconTooltip TransitionComponent={Fade} title={interest.text}>
                <div>
                  <GatsbyImage
                    image={interest.image.asset.gatsbyImageData}
                    alt={interest.alttext}
                  />
                </div>
              </IconTooltip>

Answer 3

If you are using the tooltip on top of a Dialog or Paper. The reason maybe from Z-index. Hope this is helpful for your debugging.