Displaying arrow to popover in material UI

I think this is what you want (Without using popper Component)

• 1. You will need to override background color of Popover's child component i.e. paper with transparent color;
• 2. Using psudo element of Box Component to create an arrow element.

import * as React from "react";
import Popover from "@mui/material/Popover";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";

export default function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div style={{ width: 400, height: 200, backgroundColor: "lightblue" }}>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>

      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        PaperProps={{
          style: {
            backgroundColor: "transparent",
            boxShadow: "none",
            borderRadius: 0
          }
        }}
      >
        <Box
          sx={{
            position: "relative",
            mt: "10px",
            "&::before": {
              backgroundColor: "white",
              content: '""',
              display: "block",
              position: "absolute",
              width: 12,
              height: 12,
              top: -6,
              transform: "rotate(45deg)",
              left: "calc(50% - 6px)"
            }
          }}
        />
        <Typography sx={{ p: 2, backgroundColor: "white" }}>
          The content of the Popover.
        </Typography>
      </Popover>
    </div>
  );
}

• Here is working Demo: basic Popover With Arrow

If you'd like to use a Popper instead, then the following sandbox has a component you should be able to copy straight into your codebase (typescript): RichTooltip. The standard Tooltip was not that suited to rich content for our project and did not allow buttons, selecting text, etc.

https://codesandbox.io/s/popper-with-arrow-58jhe

If you want arrow to a button which open popover you can just put html for arrow there.

<Button aria-describedby={id} variant="contained" color="primary" onClick={handleClick}>
    Open Popover <img src="//path-for-arrow-image" />
</Button>
<Popover {...propsOfPopover}> {children} </Popover>