Variable PopoverConst

Type Declaration

• • (props: PopoverProps): Element

  • Create a customized Material UI Popover component.

    Parameters

    • props: PopoverProps

      All valid Material-UI Popover props

    Returns Element

    The Popover component

    Component

    Example

    // Basic usage
    <Popover
      open={isOpen}
      anchorEl={anchorElement}
      onClose={handleClose}
    >
      <Typography>Popover content</Typography>
    </Popover>
    
    // With positioning
    <Popover
      open={isOpen}
      anchorEl={anchorElement}
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'center',
      }}
      transformOrigin={{
        vertical: 'top',
        horizontal: 'center',
      }}
    >
      <Box p={2}>Positioned content</Box>
    </Popover>
    
    // With custom styling
    <Popover
      open={isOpen}
      anchorEl={anchorElement}
      className="custom-popover"
      PaperProps={{
        sx: { p: 2 }
      }}
    >
      <Typography>Styled content</Typography>
    </Popover>
    Copy

    See

    Popover