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

Answer 2

您可以避免 InputLabelProps 并使用工具提示 PopperProps 使工具提示在输入装饰中起作用：

                  <Tooltip
                    title="Tooltip message"
                    arrow
                    PopperProps={{
                      disablePortal: true,
                      popperOptions: {
                        positionFixed: true,
                        modifiers: {
                          preventOverflow: {
                            enabled: true,
                            boundariesElement: 'window'
                          }
                        }
                      }
                    }}
                  >
                    <Info color="error" />
                  </Tooltip>