Customise popover material-ui shape

Question

I am using popover and currently, it is a plain rectangle which sits right below the box. I want to add small triangles like a pointer to make it nicer to look at and maybe add margin or padding-top so it will sit a bit lower from the box, just like this.

This is how I called the popover

 <Grid item xs={12} sm={3} ref={divToRef}>
   <Box pl={2} pt={1}>
     <Typography className={classes.weight} variant="caption" color="textSecondary">
       {t('search to').toUpperCase()}
     </Typography>
   </Box>
   <Box pl={1}>
     <AutoCompleteInput //some codes here />
   </Box>
   <Popover id="tofield" open={openTo} anchorEl={divToRef.current} onClose={handleClose} anchorOrigin={{
                            vertical: 'bottom',
                            horizontal: 'center',
                          }} transformOrigin={{
                            vertical: 'top',
                            horizontal: 'center',
                          }}>
     <Typography className={classes.popoverText}>
       Please enter destination
     </Typography>
   </Popover>
 </Grid>

and I used withStyles to modify the paper

const Popover = withStyles((theme) => ({
  root: {},
  paper: {
    backgroundColor: '#e02020',
    boxShadow: '0 20px 15px -20px rgba(0, 0, 0, 0.15)',
    borderRadius: theme.spacing(1),
    padding: theme.spacing(2),
  },
}))(MuiPopover)

How can I add the small triangle and adjust the position of transformOrigin (maybe add padding/margin) of the popover?

Answer 1

You can do this with adding this to the CSS:

.tooltip-top::before {
  content: '';
  position: absolute;
  display: block;    
  width: 0px;        
  left: 50%;
  top: 0;
  border: 15px solid transparent;
  border-top: 0;
  border-bottom: 15px solid #5494db;
  transform: translate(-50%, calc(-100% - 5px));
}

You can play around with those fields to customize where you want the arrow to be, how wide you want it and how tall you want the arrow. Check out this CodePen