Tooltip inside TextInput label is not working. 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>