reactjs - TextInput 标签内的工具提示不起作用。 Material-UI + React

Question

我想使用 TextField 的轮廓样式谁的标签必须包含 tooltip带有一些文字的图标

请引用Sandbox现场演示

代码摘录:

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>
  );
};

问题:将鼠标悬停在 (?) 图标上时不会出现工具提示。我尝试使用 FormControl 和 TextInput 以 2 种不同的方式对输入进行编码，但没有一个有效。我错过了什么吗？

Answer 1

正如 Nimmi 在评论中指出的那样，这是由于 CSS for the label 中的 pointer-events: none .

以如下所示的方式更改它确实可以让工具提示起作用，但您不应该这样做。这会导致标签是可点击的。当 pointer-events 为 none 时，对标签的点击会传递到输入并使其获得焦点。当 pointer-events 为 auto 时，点击会停在标签上，不会将焦点放在输入上。

您可能希望考虑利用帮助文本(显示在输入下方)作为合并工具提示的地方。

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

相关文档:

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events