Variable PopperConst

Type Declaration

• • (props: PopperPropsExtend): Element

  • Create a customized Material UI Popper component.

    Parameters

    • props: PopperPropsExtend

      The properties passed to the Popper element

    Returns Element

    The Popper component

    Component

    Example

    // Basic usage
    <Popper
      open={isOpen}
      anchorEl={anchorElement}
    >
      <Paper>
        <Typography>Popper content</Typography>
      </Paper>
    </Popper>
    
    // With placement and keyboard handling
    <Popper
      open={isOpen}
      anchorEl={anchorElement}
      placement="bottom-start"
      onClose={handleClose}
      handleKeyDown={(key, callback) => {
        if (key === 'Escape') callback();
      }}
    >
      <Box p={2}>Interactive content</Box>
    </Popper>
    
    // With custom styling
    <Popper
      open={isOpen}
      anchorEl={anchorElement}
      sx={{
        zIndex: 'tooltip',
        '& .MuiPaper-root': {
          p: 2
        }
      }}
    >
      <Typography>Styled content</Typography>
    </Popper>
    Copy

    See

    Popper