我的问题很简单,我有一个<Tooltip>
围绕一个组件<Select>
组件,当我单击“选择”时,工具提示会显示在菜单项上,如下所示:
正常行为:
不那么正常的行为:
因此,我保留了 Material-UI 和 Tooltip 的所有默认值:zIndex: 1500
但据我所知,没有 MenuItem 。我尝试将 MenuItem 的 zIndex 设置为 1501,但它仍然具有相同的行为。
我想知道将工具提示留在 MenuItem 后面的干净方法是什么,如果不可能,则在打开 Select MenuItems 时隐藏工具提示...
我的代码如下所示:
<Tooltip title={'Filter by status'}>
<Select value={this.state.status} onChange={this.handleChange.bind(this, Filter.Status)}>
{statuses.sort(this.filterItemSortFn).map(item => {
return (<MenuItem style={{zIndex: 1501}} value={item}>{item}</MenuItem>);
})}
</Select>
</Tooltip>
如果我将工具提示的 z Index 设置为较小的值,它会隐藏在菜单项后面,但我真的不想使用默认值,因为它也会干扰其他 zIndex 值。
我做了一个CodeSandbox:https://codesandbox.io/s/rn68z4xlo https://codesandbox.io/s/rn68z4xlo
Liam 的答案完全不正确,Joe 的答案不适用于 MUI v4。
Tooltip 组件从 Popper 组件获取其 z-index,因此仅更改 Tooltip 的 z-index 不会产生任何效果。您需要将 z-index 从 Tooltip 传递到 Popper。
Like so:
<Tooltip title={"foo"} PopperProps={{style:{zIndex:0}}}>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)