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
Variable Width We can change the width of the tooltip by setting the tooltip class with a custom width. We add a longText string which we pass into the title prop. This will be displayed. classes has the classes for the tooltip.
The hover selector is simple to add. There is no space needed because it it selecting the hover pseudo-class applied at the top level of the button component. Notice that there is no comma or semicolon between the &:hover and &:focus selectors. Instead of working with Material-UI's styling API, it overrides it.
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 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With