Подсказка внутри метки TextInput не работает. Material-UI + React

Question

Я хочу использовать стиль Outlined для TextField , чья метка должна содержать значок подсказка с текстом

Пожалуйста, обратитесь к Песочница для демонстрации в реальном времени

Выдержка из кода:

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, но ни один не работает. Я что-то упустил?

Answer 1

Как указано в комментарии Nimmi, это происходит из-за pointer-events: none в CSS для метки .

Изменение этого значения, как показано ниже, позволяет всплывающей подсказке на работу, , но вы не должны делать это . Это делает ярлык кликабельным. Когда 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