How to use React MUI Popover to build a hover or click triggered info box

When developing modern React applications, creating intuitive UI elements like tooltips, dropdown menus, and info boxes is essential for enhancing user experience. Material UI's Popover component offers a powerful solution for building these interactive elements with minimal effort. In this guide, I'll walk you through implementing both hover and click-triggered info boxes using MUI Popover, complete with customization options and best practices from my years of working with React and Material UI.

What You'll Learn

By the end of this article, you'll be able to:

Understand the core concepts and API of MUI's Popover component
Implement both click and hover-triggered info boxes
Customize Popover appearance and behavior using MUI's styling system
Handle edge cases and accessibility requirements
Apply advanced techniques for responsive and performant Popovers

The Popover component in Material UI provides a container that appears in front of its anchor element when triggered. It's similar to a tooltip but offers more flexibility in terms of content, positioning, and interaction patterns.

The Popover is essentially a modal dialog that appears relative to an element on the page (the anchor). Unlike regular modals that typically center on the screen, Popovers position themselves relative to the element that triggered them, creating a contextual relationship between the trigger and the content.

A key advantage of Popover is its ability to handle positioning automatically, including intelligent repositioning when it would otherwise overflow the viewport. This makes it perfect for creating dropdown menus, selection lists, and contextual information displays.

Before diving into implementation, let's understand the fundamental props and behavior of the Popover component.

Essential Props

Prop	Type	Default	Description
open	boolean	false	Controls whether the Popover is displayed
anchorEl	Element \| null	null	The DOM element used to position the Popover
onClose	function	-	Callback fired when the Popover requests to be closed
anchorOrigin	object	vertical: 'top', horizontal: 'left'	Position of the Popover relative to its anchor
transformOrigin	object	vertical: 'top', horizontal: 'left'	Position of the Popover content relative to its anchor
elevation	number	8	Shadow depth (0-24)

The open and anchorEl props are the most critical for controlling the Popover. You need to manage these two values in your component's state to show and hide the Popover at the right position.

Positioning Options

The anchorOrigin and transformOrigin props control how the Popover aligns with its anchor element. Each origin has vertical and horizontal properties that accept values like 'top', 'center', 'bottom' for vertical and 'left', 'center', 'right' for horizontal.

For example, if you want the Popover to appear below and centered with its anchor:


anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
transformOrigin={{ vertical: 'top', horizontal: 'center' }}

This configuration creates a dropdown-like appearance where the top-center of the Popover aligns with the bottom-center of the anchor element.

Transition and Animation

By default, the Popover uses the Grow transition from MUI, but you can customize this with the TransitionComponent and transitionDuration props:


<Popover 
  TransitionComponent={Fade}
  transitionDuration={350}
  // other props
/>

Building a Click-Triggered Info Box

Let's start with a common use case: a button that, when clicked, displays additional information in a Popover.

Step 1: Set Up Your Component

First, we'll create a basic component structure with state management for the Popover:


import React, { useState } from 'react';
import { 
  Button, 
  Popover, 
  Typography, 
  Box 
} from '@mui/material';

function ClickInfoBox() {
  // State to control Popover open status
  const [anchorEl, setAnchorEl] = useState(null);
  
  // Derived state for open status
  const open = Boolean(anchorEl);
  
  // Handler to open the Popover
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  
  // Handler to close the Popover
  const handleClose = () => {
    setAnchorEl(null);
  };
  
  return (
    <div>
      <Button 
        variant="contained" 
        onClick={handleClick}
        aria-describedby={open ? 'info-popover' : undefined}
      >
        Click for Info
      </Button>
      
      {/* Popover component will go here */}
    </div>
  );
}

export default ClickInfoBox;

In this setup, we're using the anchorEl state to track which element the Popover should anchor to. When anchorEl is null, the Popover is closed; when it contains a reference to an element, the Popover is open.

The aria-describedby attribute creates an accessibility relationship between the button and the Popover content, which is important for screen readers.

Now, let's add the Popover component with content:


import React, { useState } from 'react';
import { 
  Button, 
  Popover, 
  Typography, 
  Box 
} from '@mui/material';

function ClickInfoBox() {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  
  const handleClose = () => {
    setAnchorEl(null);
  };
  
  return (
    <div>
      <Button 
        variant="contained" 
        onClick={handleClick}
        aria-describedby={open ? 'info-popover' : undefined}
      >
        Click for Info
      </Button>
      
      <Popover
        id="info-popover"
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
        <Box sx={{ p: 2, maxWidth: 300 }}>
          <Typography variant="h6" component="div" gutterBottom>
            Important Information
          </Typography>
          <Typography variant="body2">
            This is additional information that appears in a Popover when the button is clicked.
            You can put any content here, including rich text, images, or even interactive elements.
          </Typography>
        </Box>
      </Popover>
    </div>
  );
}

export default ClickInfoBox;

In this implementation:

The Popover component is controlled by the open and anchorEl props.
The onClose handler is called when the user clicks away from the Popover.
We've positioned the Popover to appear below the button with anchorOrigin and transformOrigin.
The content is wrapped in a Box with padding and a maximum width for better readability.

Step 3: Enhance the User Experience

Let's add some enhancements to make the Popover more user-friendly:


import React, { useState } from 'react';
import { 
  Button, 
  Popover, 
  Typography, 
  Box,
  IconButton,
  Divider
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import InfoIcon from '@mui/icons-material/Info';

function ClickInfoBox() {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  
  const handleClose = () => {
    setAnchorEl(null);
  };
  
  return (
    <div>
      <Button 
        variant="outlined" 
        onClick={handleClick}
        aria-describedby={open ? 'info-popover' : undefined}
        startIcon={<InfoIcon />}
      >
        More Information
      </Button>
      
      <Popover
        id="info-popover"
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        PaperProps={{
          elevation: 3,
          sx: { borderRadius: 2 }
        }}
      >
        <Box sx={{ 
          p: 0, 
          maxWidth: 320,
        }}>
          <Box sx={{ 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'space-between',
            p: 2,
            bgcolor: 'primary.light',
            color: 'primary.contrastText'
          }}>
            <Typography variant="subtitle1" component="div" fontWeight="medium">
              Additional Details
            </Typography>
            <IconButton 
              size="small" 
              onClick={handleClose}
              aria-label="close"
              sx={{ color: 'inherit' }}
            >
              <CloseIcon fontSize="small" />
            </IconButton>
          </Box>
          <Divider />
          <Box sx={{ p: 2 }}>
            <Typography variant="body2" paragraph>
              This enhanced Popover includes a header with a close button for better usability.
              The styling has been improved to make the information more accessible.
            </Typography>
            <Typography variant="body2">
              You can include links, lists, or any other content that helps provide context
              to your users exactly when they need it.
            </Typography>
          </Box>
        </Box>
      </Popover>
    </div>
  );
}

export default ClickInfoBox;

In this enhanced version:

We've added a header with a title and close button for better usability
The Popover has a more defined structure with a divider between the header and content
We've customized the Paper component inside the Popover with the PaperProps prop
The button now has an icon to better indicate its purpose

This creates a more polished and user-friendly info box that clearly presents additional information when needed.

Building a Hover-Triggered Info Box

Now, let's create a hover-triggered info box, similar to an enhanced tooltip. This is slightly more complex because MUI's Popover doesn't have built-in hover functionality, so we'll need to implement it ourselves.

Step 1: Set Up the Component with Hover Logic


import React, { useState, useRef } from 'react';
import { 
  Typography, 
  Popover, 
  Box,
  Link
} from '@mui/material';

function HoverInfoBox() {
  const [anchorEl, setAnchorEl] = useState(null);
  const [isHovering, setIsHovering] = useState(false);
  const timerRef = useRef(null);
  
  // Derived state for open status
  const open = Boolean(anchorEl);
  
  // Delay constants (in milliseconds)
  const OPEN_DELAY = 300;
  const CLOSE_DELAY = 400;
  
  // Handler for mouse enter
  const handleMouseEnter = (event) => {
    clearTimeout(timerRef.current);
    setIsHovering(true);
    
    // Delay opening the Popover to prevent flicker on accidental hover
    timerRef.current = setTimeout(() => {
      setAnchorEl(event.currentTarget);
    }, OPEN_DELAY);
  };
  
  // Handler for mouse leave
  const handleMouseLeave = () => {
    clearTimeout(timerRef.current);
    setIsHovering(false);
    
    // Delay closing to allow moving mouse into the Popover
    timerRef.current = setTimeout(() => {
      if (!isHovering) {
        setAnchorEl(null);
      }
    }, CLOSE_DELAY);
  };
  
  return (
    <div>
      <Typography
        component="span"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        aria-owns={open ? 'hover-popover' : undefined}
        aria-haspopup="true"
        sx={{
          textDecoration: 'underline',
          textDecorationStyle: 'dotted',
          color: 'primary.main',
          cursor: 'help'
        }}
      >
        hover for more info
      </Typography>
      
      {/* Popover will go here */}
    </div>
  );
}

export default HoverInfoBox;

This setup creates the hover behavior with some important features:

We use setTimeout to add a small delay before showing the Popover, preventing it from appearing when users accidentally hover
We track both the anchorEl and a separate isHovering state to handle the hover logic
We use clearTimeout to prevent multiple timers from conflicting
The trigger text is styled with a dotted underline and "help" cursor to indicate that additional information is available

Now let's add the Popover component that responds to hover:


import React, { useState, useRef } from 'react';
import { 
  Typography, 
  Popover, 
  Box,
  Link
} from '@mui/material';

function HoverInfoBox() {
  const [anchorEl, setAnchorEl] = useState(null);
  const [isHovering, setIsHovering] = useState(false);
  const timerRef = useRef(null);
  
  const open = Boolean(anchorEl);
  const OPEN_DELAY = 300;
  const CLOSE_DELAY = 400;
  
  const handleMouseEnter = (event) => {
    clearTimeout(timerRef.current);
    setIsHovering(true);
    
    timerRef.current = setTimeout(() => {
      setAnchorEl(event.currentTarget);
    }, OPEN_DELAY);
  };
  
  const handleMouseLeave = () => {
    clearTimeout(timerRef.current);
    setIsHovering(false);
    
    timerRef.current = setTimeout(() => {
      if (!isHovering) {
        setAnchorEl(null);
      }
    }, CLOSE_DELAY);
  };
  
  // Handlers for the Popover itself
  const handlePopoverMouseEnter = () => {
    clearTimeout(timerRef.current);
    setIsHovering(true);
  };
  
  const handlePopoverMouseLeave = () => {
    setIsHovering(false);
    timerRef.current = setTimeout(() => {
      setAnchorEl(null);
    }, CLOSE_DELAY);
  };
  
  return (
    <div>
      <Typography
        component="span"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        aria-owns={open ? 'hover-popover' : undefined}
        aria-haspopup="true"
        sx={{
          textDecoration: 'underline',
          textDecorationStyle: 'dotted',
          color: 'primary.main',
          cursor: 'help'
        }}
      >
        hover for more info
      </Typography>
      
      <Popover
        id="hover-popover"
        open={open}
        anchorEl={anchorEl}
        onClose={() => setAnchorEl(null)}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        PaperProps={{
          onMouseEnter: handlePopoverMouseEnter,
          onMouseLeave: handlePopoverMouseLeave,
          sx: { 
            borderRadius: 1,
            boxShadow: 2
          }
        }}
        disableRestoreFocus
      >
        <Box sx={{ p: 2, maxWidth: 280 }}>
          <Typography variant="body2">
            This is a hover-triggered info box that stays open when you move your mouse over it.
            It provides a seamless way to show additional context without requiring a click.
          </Typography>
          <Box sx={{ mt: 1 }}>
            <Link href="#" underline="hover">Learn more</Link>
          </Box>
        </Box>
      </Popover>
    </div>
  );
}

export default HoverInfoBox;

The key additions here:

We've added mouse enter/leave handlers to the Popover itself through PaperProps
The disableRestoreFocus prop prevents focus from returning to the trigger element when the Popover closes
We've added hover and delay behavior that allows users to move their mouse from the trigger to the Popover without it closing

Step 3: Create a Reusable HoverInfoBox Component

Let's refine our implementation into a reusable component that accepts custom content:


import React, { useState, useRef } from 'react';
import { 
  Typography, 
  Popover, 
  Box
} from '@mui/material';
import PropTypes from 'prop-types';

function HoverInfoBox({ 
  children, 
  content, 
  openDelay = 300, 
  closeDelay = 400,
  maxWidth = 280,
  placement = 'bottom',
  ...props 
}) {
  const [anchorEl, setAnchorEl] = useState(null);
  const [isHovering, setIsHovering] = useState(false);
  const timerRef = useRef(null);
  
  const open = Boolean(anchorEl);
  
  // Convert placement string to anchor and transform origins
  const getOrigins = () => {
    switch (placement) {
      case 'top':
        return {
          anchorOrigin: { vertical: 'top', horizontal: 'center' },
          transformOrigin: { vertical: 'bottom', horizontal: 'center' }
        };
      case 'right':
        return {
          anchorOrigin: { vertical: 'center', horizontal: 'right' },
          transformOrigin: { vertical: 'center', horizontal: 'left' }
        };
      case 'left':
        return {
          anchorOrigin: { vertical: 'center', horizontal: 'left' },
          transformOrigin: { vertical: 'center', horizontal: 'right' }
        };
      case 'bottom':
      default:
        return {
          anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
          transformOrigin: { vertical: 'top', horizontal: 'center' }
        };
    }
  };
  
  const { anchorOrigin, transformOrigin } = getOrigins();
  
  const handleMouseEnter = (event) => {
    clearTimeout(timerRef.current);
    setIsHovering(true);
    
    timerRef.current = setTimeout(() => {
      setAnchorEl(event.currentTarget);
    }, openDelay);
  };
  
  const handleMouseLeave = () => {
    clearTimeout(timerRef.current);
    setIsHovering(false);
    
    timerRef.current = setTimeout(() => {
      if (!isHovering) {
        setAnchorEl(null);
      }
    }, closeDelay);
  };
  
  const handlePopoverMouseEnter = () => {
    clearTimeout(timerRef.current);
    setIsHovering(true);
  };
  
  const handlePopoverMouseLeave = () => {
    setIsHovering(false);
    timerRef.current = setTimeout(() => {
      setAnchorEl(null);
    }, closeDelay);
  };
  
  return (
    <>
      <Box
        component="span" 
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        aria-owns={open ? 'hover-info-popover' : undefined}
        aria-haspopup="true"
        display="inline-block"
        {...props}
      >
        {children}
      </Box>
      
      <Popover
        id="hover-info-popover"
        open={open}
        anchorEl={anchorEl}
        onClose={() => setAnchorEl(null)}
        anchorOrigin={anchorOrigin}
        transformOrigin={transformOrigin}
        PaperProps={{
          onMouseEnter: handlePopoverMouseEnter,
          onMouseLeave: handlePopoverMouseLeave,
          sx: { 
            borderRadius: 1,
            boxShadow: 2,
            maxWidth: maxWidth
          }
        }}
        disableRestoreFocus
      >
        <Box sx={{ p: 2 }}>
          {typeof content === 'string' ? (
            <Typography variant="body2">{content}</Typography>
          ) : (
            content
          )}
        </Box>
      </Popover>
    </>
  );
}

HoverInfoBox.propTypes = {
  children: PropTypes.node.isRequired,
  content: PropTypes.node.isRequired,
  openDelay: PropTypes.number,
  closeDelay: PropTypes.number,
  maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
};

export default HoverInfoBox;

Now we have a fully reusable component that can be used like this:


import HoverInfoBox from './HoverInfoBox';
import { Typography, Link, Box } from '@mui/material';

function MyComponent() {
  // Simple string content
  const simpleExample = (
    <HoverInfoBox content="This is a simple explanation that appears on hover.">
      <Typography 
        component="span" 
        sx={{ 
          textDecoration: 'underline', 
          textDecorationStyle: 'dotted',
          color: 'primary.main',
          cursor: 'help' 
        }}
      >
        hover over me
      </Typography>
    </HoverInfoBox>
  );
  
  // Complex content with custom JSX
  const complexContent = (
    <Box>
      <Typography variant="subtitle2" gutterBottom>What is React?</Typography>
      <Typography variant="body2" paragraph>
        React is a JavaScript library for building user interfaces, particularly 
        single-page applications.
      </Typography>
      <Link href="https://reactjs.org" target="_blank" rel="noopener">
        Learn more about React
      </Link>
    </Box>
  );
  
  const complexExample = (
    <HoverInfoBox 
      content={complexContent}
      placement="right"
      maxWidth={320}
      openDelay={200}
    >
      <Typography 
        component="span" 
        sx={{ fontWeight: 'bold', color: 'info.main' }}
      >
        React
      </Typography>
    </HoverInfoBox>
  );
  
  return (
    <Box sx={{ p: 3 }}>
      <Typography paragraph>
        This paragraph contains {simpleExample} with a hover info box.
      </Typography>
      
      <Typography paragraph>
        Modern web development often uses libraries like {complexExample} to 
        build interactive user interfaces.
      </Typography>
    </Box>
  );
}

export default MyComponent;

This implementation provides a flexible and reusable hover info box that can be used throughout your application with different content and styling.

The Popover component can be styled in several ways to match your application's design system.

Using the `sx` Prop

The most direct way to style a Popover is through the sx prop, which gives you access to the theme and shorthand CSS properties:


<Popover
  sx={{
    '& .MuiPopover-paper': {
      backgroundColor: 'background.paper',
      borderRadius: 2,
      boxShadow: 3,
      border: '1px solid',
      borderColor: 'divider',
      maxWidth: 350
    }
  }}
  // other props
>
  {/* content */}
</Popover>

Using `PaperProps`

Since the Popover uses a Paper component for its surface, you can style it directly with PaperProps:


<Popover
  PaperProps={{
    elevation: 4,
    sx: {
      p: 2,
      backgroundColor: (theme) => 
        theme.palette.mode === 'dark' 
          ? theme.palette.grey[800] 
          : theme.palette.grey[50],
      borderRadius: 2,
      '&::before': {
        content: '""',
        position: 'absolute',
        top: -10,
        left: '50%',
        transform: 'translateX(-50%)',
        borderWidth: '0 10px 10px 10px',
        borderStyle: 'solid',
        borderColor: 'transparent transparent currentColor transparent',
        color: 'background.paper'
      }
    }
  }}
  // other props
>
  {/* content */}
</Popover>

This example even adds a CSS arrow to the top of the Popover, creating a speech bubble effect.

Theme Customization

For application-wide Popover styling, you can customize the theme:


import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiPopover: {
      styleOverrides: {
        paper: {
          borderRadius: 8,
          boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
          border: '1px solid #e0e0e0'
        }
      }
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your application components */}
    </ThemeProvider>
  );
}

Now that we've covered the basics, let's explore some advanced techniques for working with Popovers.

Creating Interactive Popovers

Popovers can contain interactive elements like forms, buttons, or selectors:


import React, { useState } from 'react';
import {
  Button,
  Popover,
  Box,
  TextField,
  Typography,
  Slider,
  FormControlLabel,
  Switch
} from '@mui/material';

function InteractivePopover() {
  const [anchorEl, setAnchorEl] = useState(null);
  const [settings, setSettings] = useState({
    notifications: true,
    volume: 75,
    name: ''
  });
  
  const open = Boolean(anchorEl);
  
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  
  const handleClose = () => {
    setAnchorEl(null);
  };
  
  const handleSave = () => {
    // Save the settings
    console.log('Saving settings:', settings);
    handleClose();
  };
  
  const handleChange = (field) => (event) => {
    const value = field === 'notifications' 
      ? event.target.checked 
      : event.target.value;
      
    setSettings(prev => ({
      ...prev,
      [field]: value
    }));
  };
  
  return (
    <div>
      <Button 
        variant="contained" 
        onClick={handleClick}
        aria-describedby={open ? 'settings-popover' : undefined}
      >
        Open Settings
      </Button>
      
      <Popover
        id="settings-popover"
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        PaperProps={{
          sx: { width: 300, p: 3 }
        }}
      >
        <Typography variant="h6" gutterBottom>
          Quick Settings
        </Typography>
        
        <Box sx={{ mb: 2 }}>
          <TextField
            label="Display Name"
            fullWidth
            size="small"
            value={settings.name}
            onChange={handleChange('name')}
            margin="normal"
          />
        </Box>
        
        <Typography gutterBottom>Volume</Typography>
        <Slider
          value={settings.volume}
          onChange={(_, newValue) => {
            setSettings(prev => ({ ...prev, volume: newValue }));
          }}
          aria-labelledby="volume-slider"
        />
        
        <Box sx={{ mt: 2 }}>
          <FormControlLabel
            control={
              <Switch
                checked={settings.notifications}
                onChange={handleChange('notifications')}
              />
            }
            label="Enable notifications"
          />
        </Box>
        
        <Box sx={{ mt: 3, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
          <Button onClick={handleClose}>Cancel</Button>
          <Button variant="contained" onClick={handleSave}>Save</Button>
        </Box>
      </Popover>
    </div>
  );
}

export default InteractivePopover;

This example creates a settings panel that allows users to change multiple options without navigating away from the current page.

Nested Popovers

You can create nested Popovers for complex UI patterns like multi-level menus:


import React, { useState } from 'react';
import {
  Button,
  Popover,
  List,
  ListItem,
  ListItemText,
  ListItemIcon,
  Typography,
  Box
} from '@mui/material';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import SettingsIcon from '@mui/icons-material/Settings';
import PersonIcon from '@mui/icons-material/Person';
import NotificationsIcon from '@mui/icons-material/Notifications';
import SecurityIcon from '@mui/icons-material/Security';
import LanguageIcon from '@mui/icons-material/Language';

function NestedPopover() {
  const [mainAnchorEl, setMainAnchorEl] = useState(null);
  const [subAnchorEl, setSubAnchorEl] = useState(null);
  const [subMenuTitle, setSubMenuTitle] = useState('');
  const [subMenuItems, setSubMenuItems] = useState([]);
  
  const mainOpen = Boolean(mainAnchorEl);
  const subOpen = Boolean(subAnchorEl);
  
  const handleMainClick = (event) => {
    setMainAnchorEl(event.currentTarget);
  };
  
  const handleMainClose = () => {
    setMainAnchorEl(null);
  };
  
  const handleSubClose = () => {
    setSubAnchorEl(null);
  };
  
  const handleCloseAll = () => {
    setMainAnchorEl(null);
    setSubAnchorEl(null);
  };
  
  const handleSubMenuOpen = (event, title, items) => {
    setSubMenuTitle(title);
    setSubMenuItems(items);
    setSubAnchorEl(event.currentTarget);
  };
  
  const settingsSubMenu = [
    { text: 'General', icon: <SettingsIcon fontSize="small" /> },
    { text: 'Privacy', icon: <SecurityIcon fontSize="small" /> },
    { text: 'Notifications', icon: <NotificationsIcon fontSize="small" /> },
    { text: 'Language', icon: <LanguageIcon fontSize="small" /> }
  ];
  
  const accountSubMenu = [
    { text: 'Profile', icon: <PersonIcon fontSize="small" /> },
    { text: 'Security', icon: <SecurityIcon fontSize="small" /> }
  ];
  
  const mainMenuItems = [
    { 
      text: 'Settings', 
      icon: <SettingsIcon />, 
      subMenu: settingsSubMenu 
    },
    { 
      text: 'Account', 
      icon: <PersonIcon />, 
      subMenu: accountSubMenu 
    }
  ];
  
  return (
    <div>
      <Button 
        variant="contained" 
        onClick={handleMainClick}
        aria-describedby={mainOpen ? 'main-menu' : undefined}
      >
        Open Menu
      </Button>
      
      {/* Main Menu Popover */}
      <Popover
        id="main-menu"
        open={mainOpen}
        anchorEl={mainAnchorEl}
        onClose={handleMainClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
      >
        <List sx={{ width: 200, py: 0 }}>
          {mainMenuItems.map((item, index) => (
            <ListItem
              key={index}
              button
              onMouseEnter={(event) => {
                if (item.subMenu) {
                  handleSubMenuOpen(event, item.text, item.subMenu);
                } else {
                  setSubAnchorEl(null);
                }
              }}
              onClick={() => {
                if (!item.subMenu) {
                  console.log(`Clicked on ${item.text}`);
                  handleCloseAll();
                }
              }}
            >
              <ListItemIcon>{item.icon}</ListItemIcon>
              <ListItemText primary={item.text} />
              {item.subMenu && <ArrowRightIcon fontSize="small" />}
            </ListItem>
          ))}
        </List>
      </Popover>
      
      {/* Sub Menu Popover */}
      <Popover
        id="sub-menu"
        open={subOpen}
        anchorEl={subAnchorEl}
        onClose={handleSubClose}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        PaperProps={{
          onMouseLeave: handleSubClose
        }}
        // Prevent auto-focus to avoid closing the main menu
        disableAutoFocus
        disableEnforceFocus
      >
        <Box sx={{ width: 200 }}>
          <Typography variant="subtitle2" sx={{ p: 1.5, bgcolor: 'action.hover' }}>
            {subMenuTitle}
          </Typography>
          <List dense>
            {subMenuItems.map((item, index) => (
              <ListItem 
                key={index} 
                button
                onClick={() => {
                  console.log(`Clicked on ${subMenuTitle} > ${item.text}`);
                  handleCloseAll();
                }}
              >
                <ListItemIcon>{item.icon}</ListItemIcon>
                <ListItemText primary={item.text} />
              </ListItem>
            ))}
          </List>
        </Box>
      </Popover>
    </div>
  );
}

export default NestedPopover;

This example creates a nested menu system where hovering over a main menu item displays a submenu in another Popover. This pattern is common in desktop applications and complex web interfaces.

Conditional Positioning

Sometimes you need to adjust the Popover position based on the available space:


import React, { useState, useEffect } from 'react';
import {
  Button,
  Popover,
  Typography,
  Box
} from '@mui/material';

function AdaptivePopover() {
  const [anchorEl, setAnchorEl] = useState(null);
  const [position, setPosition] = useState({
    anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
    transformOrigin: { vertical: 'top', horizontal: 'center' }
  });
  
  const open = Boolean(anchorEl);
  
  const handleClick = (event) => {
    const targetRect = event.currentTarget.getBoundingClientRect();
    const spaceBelow = window.innerHeight - targetRect.bottom;
    const spaceRight = window.innerWidth - targetRect.right;
    
    // Determine the best position based on available space
    let newPosition = {
      anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
      transformOrigin: { vertical: 'top', horizontal: 'center' }
    };
    
    if (spaceBelow < 200 && targetRect.top > 200) {
      // Not enough space below, but enough above
      newPosition = {
        anchorOrigin: { vertical: 'top', horizontal: 'center' },
        transformOrigin: { vertical: 'bottom', horizontal: 'center' }
      };
    }
    
    if (spaceRight < 200 && targetRect.left > 200) {
      // Not enough space to the right, but enough to the left
      newPosition.anchorOrigin.horizontal = 'left';
      newPosition.transformOrigin.horizontal = 'right';
    } else if (spaceRight < 200) {
      // Not enough space to the right or left, center it
      newPosition.anchorOrigin.horizontal = 'center';
      newPosition.transformOrigin.horizontal = 'center';
    }
    
    setPosition(newPosition);
    setAnchorEl(event.currentTarget);
  };
  
  const handleClose = () => {
    setAnchorEl(null);
  };
  
  return (
    <div>
      <Button 
        variant="contained" 
        onClick={handleClick}
        aria-describedby={open ? 'adaptive-popover' : undefined}
      >
        Open Adaptive Popover
      </Button>
      
      <Popover
        id="adaptive-popover"
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={position.anchorOrigin}
        transformOrigin={position.transformOrigin}
      >
        <Box sx={{ p: 2, maxWidth: 300 }}>
          <Typography variant="h6" gutterBottom>
            Adaptive Positioning
          </Typography>
          <Typography variant="body2">
            This Popover adjusts its position based on the available space in the viewport.
            Try scrolling the page or resizing the window to see how it adapts.
          </Typography>
        </Box>
      </Popover>
    </div>
  );
}

export default AdaptivePopover;

This component calculates the available space in the viewport and adjusts the Popover's position accordingly, ensuring it's always fully visible.

Accessibility Considerations

Making Popovers accessible is crucial for users with disabilities. Here are some key considerations:


import React, { useState, useRef } from 'react';
import {
  Button,
  Popover,
  Typography,
  Box,
  IconButton
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';

function AccessiblePopover() {
  const [anchorEl, setAnchorEl] = useState(null);
  const closeButtonRef = useRef(null);
  
  const open = Boolean(anchorEl);
  const id = open ? 'accessible-popover' : undefined;
  
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  
  const handleClose = () => {
    setAnchorEl(null);
  };
  
  // Focus the close button when Popover opens
  React.useEffect(() => {
    if (open && closeButtonRef.current) {
      setTimeout(() => {
        closeButtonRef.current.focus();
      }, 100);
    }
  }, [open]);
  
  return (
    <div>
      <Button
        aria-describedby={id}
        variant="contained"
        onClick={handleClick}
        aria-haspopup="true"
      >
        Open Accessible Popover
      </Button>
      
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        // Trap focus inside the Popover
        disableRestoreFocus
        // Ensure proper role for screen readers
        role="dialog"
        aria-modal="true"
        aria-label="Additional information"
      >
        <Box 
          sx={{ 
            p: 2, 
            maxWidth: 350,
            position: 'relative',
            '&:focus': {
              outline: 'none'
            }
          }}
        >
          <IconButton
            ref={closeButtonRef}
            aria-label="close"
            onClick={handleClose}
            size="small"
            sx={{
              position: 'absolute',
              right: 8,
              top: 8
            }}
            // Explicitly set tabIndex to ensure it's focusable
            tabIndex={0}
          >
            <CloseIcon fontSize="small" />
          </IconButton>
          
          <Typography variant="h6" gutterBottom sx={{ pr: 4 }}>
            Accessibility Features
          </Typography>
          
          <Typography variant="body2" paragraph>
            This Popover includes proper ARIA attributes and keyboard navigation support.
          </Typography>
          
          <Typography variant="body2">
            Press Tab to navigate between elements, and Escape to close the Popover.
          </Typography>
          
          <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end' }}>
            <Button 
              variant="contained" 
              onClick={handleClose}
              size="small"
            >
              Understood
            </Button>
          </Box>
        </Box>
      </Popover>
    </div>
  );
}

export default AccessiblePopover;

This implementation includes several important accessibility features:

Proper ARIA attributes to describe the Popover's purpose
Focus management that moves focus into the Popover when it opens
A close button that's immediately focusable
Support for the Escape key to close the Popover
A clear visual focus indicator for keyboard navigation

For dynamic content in Popovers, it's important to ensure screen readers announce changes:


import React, { useState } from 'react';
import {
  Button,
  Popover,
  Typography,
  Box,
  CircularProgress
} from '@mui/material';

function ScreenReaderAwarePopover() {
  const [anchorEl, setAnchorEl] = useState(null);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);
  
  const open = Boolean(anchorEl);
  
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
    setLoading(true);
    setData(null);
    
    // Simulate data loading
    setTimeout(() => {
      setLoading(false);
      setData({
        title: "Latest Update",
        content: "Your account has been successfully updated."
      });
    }, 1500);
  };
  
  const handleClose = () => {
    setAnchorEl(null);
  };
  
  return (
    <div>
      <Button
        variant="contained"
        onClick={handleClick}
        aria-describedby={open ? 'sr-aware-popover' : undefined}
      >
        Check Updates
      </Button>
      
      <Popover
        id="sr-aware-popover"
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        aria-live="polite"
      >
        <Box sx={{ p: 3, width: 300 }}>
          {loading ? (
            <Box 
              sx={{ 
                display: 'flex', 
                flexDirection: 'column', 
                alignItems: 'center' 
              }}
              role="status"
              aria-label="Loading content"
            >
              <CircularProgress size={40} />
              <Typography sx={{ mt: 2 }}>
                Loading updates...
              </Typography>
            </Box>
          ) : data ? (
            <Box role="status">
              <Typography variant="h6" gutterBottom>
                {data.title}
              </Typography>
              <Typography variant="body2">
                {data.content}
              </Typography>
              <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end' }}>
                <Button onClick={handleClose}>Close</Button>
              </Box>
            </Box>
          ) : null}
        </Box>
      </Popover>
    </div>
  );
}

export default ScreenReaderAwarePopover;

This example includes:

The aria-live="polite" attribute to announce content changes
Proper role="status" for dynamic content areas
Descriptive labels for loading states

Common Issues and Solutions

When working with Popovers, you might encounter some common challenges. Here are solutions to frequent issues:

Problem: Popover appears in an unexpected position or gets cut off.

Solution: Adjust the anchor and transform origins, and ensure the container has proper overflow handling:


// Make sure the container allows overflow
<Box sx={{ overflow: 'visible' }}>
  <Popover
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    // Add some margin to prevent cutting off
    marginThreshold={16}
    // other props
  >
    {/* content */}
  </Popover>
</Box>

Flickering on Hover

Problem: When creating hover-triggered Popovers, they might flicker when the mouse moves between the anchor and the Popover.

Solution: Use timers and track hover state for both elements:


const [isAnchorHovered, setIsAnchorHovered] = useState(false);
const [isPopoverHovered, setIsPopoverHovered] = useState(false);
const timerRef = useRef(null);

// Derived state for whether the Popover should be open
const shouldBeOpen = isAnchorHovered || isPopoverHovered;

useEffect(() => {
  if (shouldBeOpen) {
    clearTimeout(timerRef.current);
    setAnchorEl(anchorElement);
  } else {
    // Add delay before closing
    timerRef.current = setTimeout(() => {
      setAnchorEl(null);
    }, 300);
  }
  
  return () => {
    clearTimeout(timerRef.current);
  };
}, [shouldBeOpen, anchorElement]);

Focus Management Issues

Problem: Focus gets lost or doesn't move properly when the Popover opens or closes.

Solution: Explicitly manage focus and use the right props:


const contentRef = useRef(null);

// Focus the content when Popover opens
useEffect(() => {
  if (open && contentRef.current) {
    // Small delay to ensure the Popover is fully rendered
    setTimeout(() => {
      contentRef.current.focus();
    }, 10);
  }
}, [open]);

return (
  <Popover
    // Don't restore focus to the anchor when closing
    // if you want to handle focus manually
    disableRestoreFocus
    // other props
  >
    <div 
      ref={contentRef} 
      tabIndex={-1} 
      style={{ outline: 'none' }}
    >
      {/* content */}
    </div>
  </Popover>
);

Performance with Many Popovers

Problem: Having many potential Popovers on a page can impact performance.

Solution: Use a single, reusable Popover component:


import React, { useState } from 'react';
import { Popover, Typography } from '@mui/material';

// Create a context to manage a shared Popover
const PopoverContext = React.createContext({
  openPopover: () => {},
  closePopover: () => {}
});

function PopoverProvider({ children }) {
  const [anchorEl, setAnchorEl] = useState(null);
  const [content, setContent] = useState(null);
  
  const openPopover = (event, popoverContent) => {
    setAnchorEl(event.currentTarget);
    setContent(popoverContent);
  };
  
  const closePopover = () => {
    setAnchorEl(null);
  };
  
  const open = Boolean(anchorEl);
  
  return (
    <PopoverContext.Provider value={{ openPopover, closePopover }}>
      {children}
      
      <Popover
        open={open}
        anchorEl={anchorEl}
        onClose={closePopover}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
        {content}
      </Popover>
    </PopoverContext.Provider>
  );
}

// Hook to use the shared Popover
function usePopover() {
  return React.useContext(PopoverContext);
}

// Example usage
function PopoverButton({ content, children }) {
  const { openPopover } = usePopover();
  
  const handleClick = (event) => {
    openPopover(event, (
      <Typography sx={{ p: 2 }}>{content}</Typography>
    ));
  };
  
  return (
    <button onClick={handleClick}>
      {children}
    </button>
  );
}

// App with shared Popover
function App() {
  return (
    <PopoverProvider>
      <div>
        <PopoverButton content="This is info about button 1">
          Button 1
        </PopoverButton>
        
        <PopoverButton content="This is info about button 2">
          Button 2
        </PopoverButton>
        
        {/* More buttons/triggers */}
      </div>
    </PopoverProvider>
  );
}

This approach uses a single Popover instance for multiple triggers, improving performance when you have many potential Popover triggers on a page.

Best Practices for MUI Popovers

Based on my experience working with MUI Popovers, here are some best practices to follow:

1. Keep Content Focused

Popovers should contain focused, relevant information or controls. Avoid overloading them with too much content:


// Good - Focused content
<Popover>
  <Box sx={{ p: 2, maxWidth: 300 }}>
    <Typography variant="h6" gutterBottom>
      Image Settings
    </Typography>
    <Typography variant="body2" gutterBottom>
      Adjust quality settings for this image.
    </Typography>
    <Slider
      aria-label="Quality"
      defaultValue={80}
      valueLabelDisplay="auto"
      step={10}
      marks
      min={10}
      max={100}
    />
  </Box>
</Popover>

// Avoid - Too much content
<Popover>
  <Box sx={{ p: 2, width: 500, maxHeight: 400, overflow: 'auto' }}>
    <Typography variant="h6">Settings</Typography>
    {/* Too many options and sections */}
    {/* Long forms */}
    {/* Complex tables */}
  </Box>
</Popover>

2. Provide Clear Dismissal Methods

Always give users obvious ways to dismiss the Popover:


<Popover>
  <Box sx={{ p: 2 }}>
    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
      <Typography variant="subtitle1">Notification Settings</Typography>
      <IconButton size="small" onClick={handleClose} aria-label="close">
        <CloseIcon fontSize="small" />
      </IconButton>
    </Box>
    
    {/* Content */}
    
    <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
      <Button size="small" onClick={handleClose}>Cancel</Button>
      <Button size="small" variant="contained" onClick={handleSave}>Save</Button>
    </Box>
  </Box>
</Popover>

3. Use Appropriate Animation Duration

Keep animations snappy for frequent interactions:


// For informational Popovers
<Popover transitionDuration={300}>
  {/* Content */}
</Popover>

// For frequently used Popovers (like menus)
<Popover transitionDuration={150}>
  {/* Content */}
</Popover>

// For complex interactions, you can use different durations for entering and exiting
<Popover transitionDuration={{ enter: 300, exit: 100 }}>
  {/* Content */}
</Popover>

4. Handle Edge Cases

Account for different screen sizes and content lengths:


<Popover
  PaperProps={{
    sx: {
      maxWidth: {
        xs: '90vw',
        sm: 350,
        md: 400
      },
      maxHeight: {
        xs: '60vh',
        sm: 400
      },
      overflow: 'auto'
    }
  }}
>
  {/* Content that might be long */}
</Popover>

5. Use Consistent Positioning

Maintain consistent positioning for similar types of Popovers throughout your application:


// Create a reusable configuration
const menuPopoverProps = {
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: 'right',
  },
  transformOrigin: {
    vertical: 'top',
    horizontal: 'right',
  },
  PaperProps: {
    elevation: 3,
    sx: { 
      borderRadius: 1,
      mt: 0.5
    }
  }
};

// Use it consistently
<Popover {...menuPopoverProps}>
  {/* Menu content */}
</Popover>

Wrapping Up

MUI's Popover component offers a versatile foundation for building contextual UI elements like tooltips, dropdown menus, and info boxes. In this guide, we've covered both click and hover-triggered implementations, along with advanced techniques for creating accessible, performant, and visually appealing Popovers.

Remember that a well-designed Popover should enhance the user experience by providing just the right amount of information or functionality at the right moment. By following the best practices and implementations outlined in this guide, you can create Popovers that feel natural and intuitive to your users while maintaining good performance and accessibility.

Whether you're building simple info boxes or complex interactive menus, the techniques covered here will help you leverage the full power of MUI's Popover component in your React applications.

Modal Popper

Building Interactive Elements with React MUI Popover: A Complete Guide

What You'll Learn

Understanding MUI Popover

Core Popover API

Essential Props

Positioning Options

Transition and Animation

Building a Click-Triggered Info Box

Step 1: Set Up Your Component

Step 2: Add the Popover Component

Step 3: Enhance the User Experience

Building a Hover-Triggered Info Box

Step 1: Set Up the Component with Hover Logic

Step 2: Add the Hover-Aware Popover

Step 3: Create a Reusable HoverInfoBox Component

Customizing Popover Appearance

Using the `sx` Prop

Using `PaperProps`

Theme Customization

Advanced Popover Techniques

Creating Interactive Popovers

Nested Popovers

Conditional Positioning

Accessibility Considerations

Keyboard Navigation

Common Issues and Solutions

Popover Positioning Issues

Flickering on Hover

Focus Management Issues

Performance with Many Popovers

Best Practices for MUI Popovers

1. Keep Content Focused

2. Provide Clear Dismissal Methods

3. Use Appropriate Animation Duration

4. Handle Edge Cases

5. Use Consistent Positioning

Wrapping Up

Building Interactive Elements with React MUI Popover: A Complete Guide

What You'll Learn

Understanding MUI Popover

Core Popover API

Essential Props

Positioning Options

Transition and Animation

Building a Click-Triggered Info Box

Step 1: Set Up Your Component

Step 2: Add the Popover Component

Step 3: Enhance the User Experience

Building a Hover-Triggered Info Box

Step 1: Set Up the Component with Hover Logic

Step 2: Add the Hover-Aware Popover

Step 3: Create a Reusable HoverInfoBox Component

Customizing Popover Appearance

Using the sx Prop

Using PaperProps

Theme Customization

Advanced Popover Techniques

Creating Interactive Popovers

Nested Popovers

Conditional Positioning

Accessibility Considerations

Keyboard Navigation

Screen Reader Announcements

Common Issues and Solutions

Popover Positioning Issues

Flickering on Hover

Focus Management Issues

Performance with Many Popovers

Best Practices for MUI Popovers

1. Keep Content Focused

2. Provide Clear Dismissal Methods

3. Use Appropriate Animation Duration

4. Handle Edge Cases

5. Use Consistent Positioning

Wrapping Up

Using the `sx` Prop

Using `PaperProps`