Material UI中Tooltip绑定后菜单未显示在按钮图标下方，如何解决？

你遇到的问题根源在于Tooltip组件改变了点击事件的锚点元素：当你把Tooltip套在IconButton外层时，handleClick里的event.currentTarget指向的是Tooltip生成的容器元素，而非原本的IconButton。Menu组件依赖anchorEl来定位，锚点错了，菜单自然就跑到奇怪的位置去了。

修复方案 #

把Tooltip放到IconButton内部，让IconButton始终作为点击事件的目标元素，同时保留Tooltip的功能：

export default function FadeMenu() {
    const [ anchorEl, setAnchorEl ] = React.useState(null)
    const bus = Bus()
    const open = Boolean(anchorEl)

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

    const handleClose = option => {
        
    }

    return (
        <div style={{alignItems: 'center', display: 'flex'}}>
            <IconButton
                aria-label={'more'}
                id='fade-button'
                aria-haspopup='true'
                aria-controls={open ? 'fade-menu' : undefined}
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
            >
                {/* 将Tooltip移到IconButton内部，包裹Icon */}
                <CustomTooltip title={'Add Request'} placement={'top'} arrow>
                    <Icon color='primary' fontSize='medium'>add</Icon>
                </CustomTooltip>
            </IconButton>
            <Menu
                id='fade-menu'
                MenuListProps={{
                    'aria-labelledby': 'fade-button',
                }}
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                PaperProps={{
                    elevation: 0,
                    sx: {
                        '& .MuiAvatar-root': {
                            height: 32,
                            ml: -0.5,
                            mr: 1,
                            width: 32
                        },
                        '&:before': {
                            bgcolor: 'background.paper',
                            content: '""',
                            display: 'block',
                            height: 10,
                            position: 'absolute',
                            right: 14,
                            top: 0,
                            transform: 'translateY(-50%) rotate(45deg)',
                            width: 10,
                            zIndex: 0
                        },
                        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
                        ml: 1.6,
                        mt: 0.4,
                        overflow: 'visible'
                    }
                }}
            >
                {menuOptions.map(m => (<MenuItem onClick={() => handleClose(m)} key={m}>{m}</MenuItem>))}
            </Menu>
        </div>
    )
}

为什么这样有效？ #

调整后，点击事件的currentTarget依然是IconButton，Menu组件能正确获取到锚点元素的位置，菜单就会乖乖显示在按钮下方了。同时Tooltip的触发目标变成了内部的Icon，hover时依然能正常显示提示，功能不受影响。

内容的提问来源于stack exchange，提问作者KARTHIKEYAN.A