应用工具提示菜单选项后，显示在窗口中的不同位置，而不是材料 ui 中的按钮图标下方。同样的问题怎么解决

Question

我正在尝试将工具提示应用于选项菜单图标，但它没有按我预期的方式工作。

我的代码是：

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'}}>
            <CustomTooltip title={'Add Request'} placement={'top'} arrow>
                <IconButton
                    aria-label={'more'}
                    id='fade-button'
                    aria-haspopup='true'
                    aria-controls={open ? 'fade-menu' : undefined}
                    aria-expanded={open ? 'true' : undefined}
                    onClick={handleClick}
                >
                    <Icon color='primary' fontSize='medium'>add</Icon>
                </IconButton>
            </CustomTooltip>
            <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>
    )
}

Answer 1

我已从 menuOption 组件中删除了

<Tooltip>

，并通过按以下方式包装

<span>

元素及其工作原理将其添加到另一个组件中。

选项菜单组件：

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

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

    const handleClose = option => {
        setAnchorEl(null)
    }

    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}
            >
                <Icon color='primary' fontSize='medium'>add</Icon>
            </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'
                    }
                }}
                // TransitionComponent={Fade}
            >
                {menuOptions.map(m => (<MenuItem onClick={() => handleClose(m)} key={m}>{m}</MenuItem>))}
            </Menu>
        </div>
    )
}

其他组件：

import IconMenu from './menu-option'

<CustomTooltip title={'Add Request'} placement={'top'} arrow>
    <span><IconMenu/></span>
</CustomTooltip>