我正在使用 Material-UI v1.0.0-beta.34 中的 Tooltip 和 Checkbox,实际上在一个情况下当我悬停在 Checkbox 标签上时,Tooltip 正常显示;另一方面,当我创建了一个包含 FormControlLabel 和 Checkbox 的自定义组件时,Tooltip 看起来并没有按预期工作。
我正在使用 Material-UI v1.0.0-beta.34 中的 Tooltip 和 Checkbox,实际上在一个情况下当我悬停在 Checkbox 标签上时,Tooltip 正常显示;另一方面,当我创建了一个包含 FormControlLabel 和 Checkbox 的自定义组件时,Tooltip 看起来并没有按预期工作。
如果您像这样将 Checkbox
包装在一个 div
中,Tooltip
将正常工作:
Tooltip
将正常工作:
<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>
Tooltip
组件通过响应其子组件的事件(如 onMouseEnter
、onMouseLeave
等)来工作。它通过将 props 应用于顶级子项来注册这些事件。
当您将 Checkbox
包装在一个 div
中时,div
将接收 onMouseEnter
和 onMouseLeave
属性,因此悬停正常工作。
但是,如果您没有包装 Checkbox
,则您的自定义 Checkbox
会将 onMouseOver
和 onMouseLeave
作为其 props
的一部分接收。您可以像这样将这些 props
扩展到 MuiCheckbox
:
<FormControlLabel
control={<MuiCheckbox {...props} />}
label={label ? label : ""}
/>
因此,您实际上是只将 onMouseOver
和 onMouseLeave
应用于了 MUICheckbox
本身,而不是应用于标签。因此,悬停只对 Checkbox
起作用,而不是标签。
如果您愿意,还可以通过在整个自定义组件中传递属性来解决此问题:
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>
);
};
我最初并没有建议那个解决方案,因为如果你不小心的话,它可能会改变你的组件逻辑,而一个包装的 div
应该是相当安全的。
如果有人感兴趣,@JulesDupont 提出的这个解决方案也适用于 GatsbyImage:
<IconTooltip TransitionComponent={Fade} title={interest.text}>
<div>
<GatsbyImage
image={interest.image.asset.gatsbyImageData}
alt={interest.alttext}
/>
</div>
</IconTooltip>
如果您在对话框或纸张上使用工具提示,原因可能是 Z-index。希望这对您的调试有所帮助。
div
可以解决你的问题。 - Jules Dupont