/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/popover/MouseHoverPopover.js
48 строк
1 KB
Zeeshan Tamboli
[docs][material-ui][Popover] Fix description and title of hover interaction section (#43290)
15 авг 2024, 13:38
Не верифицирован
15 авг 2024, 13:38
5fefa49
Код
Авторство
О чём код?
import * as React from 'react'; import Popover from '@mui/material/Popover'; import Typography from '@mui/material/Typography'; export default function MouseHoverPopover() { const [anchorEl, setAnchorEl] = React.useState(null); const handlePopoverOpen = (event) => { setAnchorEl(event.currentTarget); }; const handlePopoverClose = () => { setAnchorEl(null); }; const open = Boolean(anchorEl); return ( <div> <Typography aria-owns={open ? 'mouse-over-popover' : undefined} aria-haspopup="true" onMouseEnter={handlePopoverOpen} onMouseLeave={handlePopoverClose} > Hover with a Popover. </Typography> <Popover id="mouse-over-popover" sx={{ pointerEvents: 'none' }} open={open} anchorEl={anchorEl} anchorOrigin={{ vertical: 'bottom', horizontal: 'left', }} transformOrigin={{ vertical: 'top', horizontal: 'left', }} onClose={handlePopoverClose} disableRestoreFocus > <Typography sx={{ p: 1 }}>I use Popover.</Typography> </Popover> </div> ); }