Reactjs TextInput标签内的工具提示不起作用。材料界面+；反应

我想使用一个谁的标签必须包含一些文字图标的概述样式

有关实时演示，请参阅

代码摘录：

const IconWithTooltip = () => (
  <Tooltip title="Text explaining stuff">
    <HelpIcon />
  </Tooltip>
);

const Example = () => {
  return (
    <div>
      <FormControl variant="outlined">
        <InputLabel htmlFor="with-label">
          FormControl with label
          <IconWithTooltip />
        </InputLabel>
        <OutlinedInput
          id="with-label"
          startAdornment={<InputAdornment position="start">$</InputAdornment>}
        />
      </FormControl>
      <TextField
        label={
          <div>
            TextFiled
            <IconWithTooltip />
          </div>
        }
        variant="outlined"
      />
      Just icon with tooltop
      <IconWithTooltip />
    </div>
  );
};

consticonwithToolTip=（）=>(
);
常量示例=（）=>{
返回(
带标签的窗体控件
只需带有工具提示的图标
);
};

问题：

---

将鼠标悬停在（？）图标上时，不会显示工具提示。我尝试过使用FormControl和TextInput以两种不同的方式对输入进行编码，但都不起作用。我遗漏了什么吗？

正如Nimmi在评论中指出的，这是由于

指针事件造成的：没有

以如下所示的方式更改此选项确实允许工具提示正常工作，但不应执行此操作。这会使标签可单击。当
指针事件
为
无
时，单击标签会传递到输入并使其接收焦点。当
指针事件
为
自动
时，单击会在标签上停止，不会将焦点移到输入上

您可能希望利用辅助文本（显示在输入下方）作为合并工具提示的位置

      <TextField
        InputLabelProps={{ style: { pointerEvents: "auto" } }}
        label={
          <div>
            TextFiled
            <IconWithTooltip />
          </div>
        }
        variant="outlined"
        type="text"
      />




相关文件：



您的问题在于class.MuiInputLabel中的“指针事件：无”CSS。根据您的需要进行更新，它应该可以工作。感谢您提供的可用性提示。绝对值得尝试文本助手。