How to embed a tooltip icon in a Select (material-ui)

Issue

I am using material UI tooltip component and I am trying to align my tooltip to the right of my dropdown--right next to the down arrow carrot shown like in the image below,

But the way I have it now, the tooltip is added below the select in a funky way.

---

  <FormControl label='Identifier Type' style={{ width: '100%' }}>
    <Select
      ...
    />
      <Tooltip disableHoverListener onClose={handleTooltipClose} open={open} placement='right' title='Helper....'>
        <Button variant="secondary" onClick={handleTooltipOpen}>
          <Icon
            size="small"
            accessibleText='Delete Row'
            name='help'
            style={{ color: '4c505b' }}
          />
        </Button>
      </Tooltip>
    </div>
  </FormField>

Solution

According to the API of Select, it seems not possible to append a helper icon to the component as of now (v5.14.11). However, with styling, you can make it look like it belongs :) You can use MUI's makeStyles. For simplicity, I did that with inline-styling. Notice that I added Box from MUI and removed the Button:

<FormControl variant="standard" label="Identifier Type" >
    <Box style={{display: "flex", justifyContent: "flex-end", alignItems: "flex-end"}}>
        <InputLabel id="color">Color</InputLabel>
        <Select
            value=""
            label="Color"
            labelId="color"
            style={{ width: '200px' }}
        >
            <MenuItem value="1">Green</MenuItem>
            <MenuItem value="2">Orange</MenuItem>
            <MenuItem value="3">Red</MenuItem>
        </Select>
        <Tooltip disableHoverListener title="helper.." placement="right" >
            <HelpCenterIcon 
                fontSize="small"
                name="help"
                style={{ color: "#757575", padding: "5px 10px", borderBottom: "1px solid #949494", }}
            />
        </Tooltip>
    </Box>
</FormControl>

And this is how it looks:

Let me know if you want the makeStyles solution.

Answered By - Amrovic