Popovers

Styles

You will find all the styles for these components in
styles/jss/nextjs-material-kit-pro/popoverStyles.js.

Example

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Popover from "@material-ui/core/Popover";
// core components
import Button from "components/CustomButtons/Button.js";

import popoverStyles from "styles/jss/nextjs-material-kit-pro/popoverStyles.js";

const useStyles = makeStyles(popoverStyles);

export default function Popovers(){
  const [anchorElLeft, setAnchorElLeft] = React.useState(null);
  const [anchorElTop, setAnchorElTop] = React.useState(null);
  const [anchorElBottom, setAnchorElBottom] = React.useState(null);
  const [anchorElRight, setAnchorElRight] = React.useState(null);
  const classes = useStyles();
  return (
    <>
      <Button onClick={event => setAnchorElLeft(event.currentTarget)}>
        On left
      </Button>
      <Popover
        classes={{
          paper: classes.popover
        }}
        open={Boolean(anchorElLeft)}
        anchorEl={anchorElLeft}
        onClose={() => setAnchorElLeft(null)}
        anchorOrigin={{
          vertical: "center",
          horizontal: "left"
        }}
        transformOrigin={{
          vertical: "center",
          horizontal: "right"
        }}
      >
        <h3 className={classes.popoverHeader}>Popover on left</h3>
        <div className={classes.popoverBody}>
          Here will be some very useful information about his popover.
          Here will be some very useful information about his popover.
        </div>
      </Popover>
      <Button onClick={event => setAnchorElTop(event.currentTarget)}>
        On top
      </Button>
      <Popover
        classes={{
          paper: classes.popover
        }}
        open={Boolean(anchorElTop)}
        anchorEl={anchorElTop}
        onClose={() => setAnchorElTop(null)}
        anchorOrigin={{
          vertical: "top",
          horizontal: "center"
        }}
        transformOrigin={{
          vertical: "bottom",
          horizontal: "center"
        }}
      >
        <h3 className={classes.popoverHeader}>Popover on top</h3>
        <div className={classes.popoverBody}>
          Here will be some very useful information about his popover.
        </div>
      </Popover>
      <Button onClick={event => setAnchorElBottom(event.currentTarget)}>
        On bottom
      </Button>
      <Popover
        classes={{
          paper: classes.popover
        }}
        open={Boolean(anchorElBottom)}
        anchorEl={anchorElBottom}
        onClose={() => setAnchorElBottom(null)}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center"
        }}
      >
        <h3 className={classes.popoverHeader}>Popover on bottom</h3>
        <div className={classes.popoverBody}>
          Here will be some very useful information about his popover.
        </div>
      </Popover>
      <Button onClick={event => setAnchorElRight(event.currentTarget)}>
        On right
      </Button>
      <Popover
        classes={{
          paper: classes.popover
        }}
        open={Boolean(anchorElRight)}
        anchorEl={anchorElRight}
        onClose={() => setAnchorElRight(null)}
        anchorOrigin={{
          vertical: "center",
          horizontal: "right"
        }}
        transformOrigin={{
          vertical: "center",
          horizontal: "left"
        }}
      >
        <h3 className={classes.popoverHeader}>Popover on right</h3>
        <div className={classes.popoverBody}>
          Here will be some very useful information about his popover.
        </div>
      </Popover>
    </>
  );
}

Props

Please check out the official material-ui documentation.