禁用或隐藏工具提示，而无需管理Toottip状态(材料UI) [英] Disable or Hide Tooltip without managing toottip state (Material UI)

问题描述

所以我有一个带有子选择的文本字段，而子选择又具有一个子菜单，如下所示:

 <工具提示标题= {features.length>1个?特征.map((feat)=> FeatureOptions.find((f)=> f.value === feat).label).join(，"):"}展示位置='自下而上'">< TextFieldlabel ="ML功能"变体＝概述的".保证金＝致密".选择多全屏宽度InputLabelProps = {{收缩:是，边距:密集"；}}SelectProps = {{倍数:对，值:功能，displayEmpty:true，renderValue :(功能)=>features.length>0?特征.map((feat)=> FeatureOptions.find((f)=> f.value === feat).label).join(", "):无"，onChange :(事件)=>setFeatures(event.target.value)，菜单道具类别:{根目录:classes.selectOutlined，概述:classes.outlined，iconOutlined:classes.iconOutlined}}}>{FeatureOptions.map((opt，i)=>(< MenuItem键= {opt.value}值= {opt.value}密集><复选框尺寸=小"；已检查= {features.includes(opt.value)}/>{opt.label}</MenuItem>))}</TextField></工具提示> 

我的问题是，工具提示第一次出现在菜单项上方，非常不愉快，如下所示:

我真的只希望当鼠标悬停在文本字段本身上时，工具提示才会显示出来，但是由于文本字段包装了选择和菜单项，因此它也在此处被激活.

尝试的解决方案:无论在这里:

So I have text field with a a child select who in turn has a child menu like so:

<Tooltip
                    title={
                      features.length > 1
                        ? features
                            .map((feat) => FeatureOptions.find((f) => f.value === feat).label)
                            .join(", ")
                        : ""
                    }
                    placement="'bottom-start'"
                  >
                    <TextField
                      label="ML Features"
                      variant="outlined"
                      margin="dense"
                      select
                      multiple
                      fullWidth
                      InputLabelProps={{ shrink: true, margin: "dense" }}
                      SelectProps={{
                        multiple: true,
                        value: features,
                        displayEmpty: true,
                        renderValue: (features) =>
                          features.length > 0
                            ? features
                                .map((feat) => FeatureOptions.find((f) => f.value === feat).label)
                                .join(", ")
                            : "None",
                        onChange: (event) => setFeatures(event.target.value),
                        MenuProps,
                        classes: {
                          root: classes.selectOutlined,
                          outlined: classes.outlined,
                          iconOutlined: classes.iconOutlined
                        }
                      }}
                    >
                      {FeatureOptions.map((opt, i) => (
                        <MenuItem key={opt.value} value={opt.value} dense>
                          <Checkbox size="small" checked={features.includes(opt.value)} />
                          {opt.label}
                        </MenuItem>
                      ))}
                    </TextField>
                  </Tooltip>

My issus is that the first time the tooltip appears it is above the menu items and quite unpleasant like so:

I really only want the tooltip to dislpay when hovering over the text field itself but since the text field wraps the select and menu items it is activated there as well.

Solutions attempted: Whatever is here: Material-UI Tooltip zIndex over MenuItem in Select component Sadly this did not work, I also tried messing with the PopperProps but no go.

Expected Behavior: Do not display tooltip over my menu item!

*What I don't want is to start programmtically changing the tooltip state or disableHover, I am maintainig enough state as it is and am not interested in more of it.

解决方案

Increase the Menu Popover root z-index such that it is higher than the Tooltip z-index

const useStyles = makeStyles({
  customMenu: {
    // !important is applied because the default z-index is applied inline
    zIndex: "1501 !important"
  }
});

<Tooltip open={true} title="Sample Tooltip Title" arrow>
  <TextField
    label="ML Features"
    variant="outlined"
    margin="dense"
    select
    multiple
    fullWidth
    SelectProps={{
      MenuProps: {
        PopoverClasses: {
          root: classes.customMenu
        }
      }
    }}
  >
    <MenuItem value="foo">Foo</MenuItem>
    <MenuItem value="bar">Bar</MenuItem>
  </TextField>
</Tooltip>

这篇关于禁用或隐藏工具提示，而无需管理Toottip状态(材料UI)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！