Adding an Info or Help tooltip can significantly enhance user experience on a form. This post will cover displaying a custom MUI tooltip when hovering over TextField ornament icon. 

Prerequisites

MUI – Material UI v5.4.3

Material UI library for React

npm install @mui/material @mui/lab @emotion/react @emotion/styled

Custom ToolTip Component

GlobalTooltip.js should be placed in under the components folder .
Example: “./components/GlobalTooltip.js”.
This component will display a custom tooltip that can be modified to match your website’s theme. You can get the source code from MUI’s site here. The code below has one small modification to the arrow property so it matches the light gray background. The arrow property is the small arrow tip that points to the component the tooltip is called from.

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';

export  const HtmlTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: '#f5f5f9',
    color: 'rgba(0, 0, 0, 0.87)',
    maxWidth: 220,
    fontSize: theme.typography.pxToRem(12),
    border: '1px solid #dadde9',
    maxWidth: 300,
  },
  [`& .${tooltipClasses.arrow}`]: {
    backgroundColor: '#ffffff',
    color: 'rgba(0, 0, 0, 0.27)',
    
  },
}));

Info Icon Component

Info or Helper Icon with Tooltip Component

Create another component under the ‘./components’ folder and label it MyHelperIcon.js. As a generic color scheme, the icon is light blue.

import React from 'react'
import InfoIcon from '@mui/icons-material/Info';
import { HtmlTooltip } from './GlobalToolTip';
import { Typography } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import { blue } from '@mui/material/colors';

export default function MyHelperIcon(props) {
  return (
    <>
        <HtmlTooltip color="primary" 
                     arrow
                     placement="top"
                     title={
                     <React.Fragment>
                    <Typography color="inherit" variant="h6">{props.title}</Typography>                        
                        {props.description}
                     </React.Fragment>
                    }
                >
                <IconButton color="primary" aria-label="help icon" component="span" tabIndex="-1">
                <InfoOutlinedIcon sx={{ color: blue[200] }} />
                </IconButton>
        </HtmlTooltip>
    </>
  )
}

Tab Index

Note: The MUI IconButton has a property of tabIndex and you which should be set to “-1“, otherwise when the user hits the tab button it will go to the icon button instead of the next field.

<IconButton color="primary" aria-label="help icon" component="span" tabIndex="-1">
   <InfoOutlinedIcon sx={{ color: blue[200] }} />
<IconButton>

The Form Component

Source for the Page

Create a page under ‘./pages‘ labeled as ‘./pages/MyForm.js’.

import React from 'react';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormLabel from '@mui/material/FormLabel';
import MyHelperIcon from '../components/MyHelperIcon';

export default function MyForm(props) {   

    return (
        <>
           <TextField placeholder=""                                     
                       label="Event Title"      
                       fullWidth
                       variant="outlined"
                       size="small"           
                       type="text"     
                       name="title"                                    
                       InputProps={{
                         endAdornment: (
                             <MyHelperIcon title="Event Title" 
                                         description={'Some Description'}/> 
                         ),
                       }}           
            />
     
        </>
    )
}

Snippet for the TextField

Put the HelperIcon component in the TextField -> InputProps -> endAdornment

import MyHelperIconfrom '../components/MyHelperIcon';

...

<TextField 
...

  InputProps={{
  endAdornment: (
  <MyHelperIcon title="Event Title" 
     description={'Some Description'}/> 
  ),
  }                                  
/>