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

Question

I want to use an Outlined style of a TextField who's label must contain a tooltip icon with some text

Please refer to Sandbox for a live demo

Code excerpt:

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

Problem: When hovering over the (?) icon tooltip does not appear. I have tried coding the input in 2 different ways using FormControl and TextInput but none works. Am i missing something?

Answer 1

As indicated by Nimmi in a comment, this is due to pointer-events: none in the CSS for the label .

Changing this in the manner shown below does allow the tooltip to work, but you should NOT do this . This causes the label to be clickable. When pointer-events is none , a click on the label passes through to the input and causes it to receive focus. When pointer-events is auto , the click stops on the label and does not bring focus to the input.

You may want to look into leveraging helper text (shown below the input) as a place to incorporate the tooltip.

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

Related documentation:

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

Answer 2

You can avoid the InputLabelProps and make the tooltip work in the input adornment with the tooltip PopperProps:

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