введите здесь описание изображения
Я хочу реализовать всплывающую подсказку пользовательского интерфейса с настраиваемым компонентом всплывающей подсказки. который будет использовать всплывающую подсказку, элемент списка, компонент списка из реагирующего материала пользовательского интерфейса
Я пытался использовать элемент списка
npm install @mui/material @emotion/react @emotion/styled
и npm install @mui/icons-material
import { Box, List, Tooltip, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider } from '@mui/material';
import MailIcon from '@mui/icons-material/Mail';
import ModeIcon from '@mui/icons-material/Mode';
import * as React from 'react';
export default function BasicList() {
return (
<Box sx = {{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
<List>
<Tooltip title = "Inbox">
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon>
<MailIcon />
</ListItemIcon>
<ListItemText primary = "Inbox" />
</ListItemButton>
</ListItem>
</Tooltip>
<Tooltip title = "Drafts">
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon>
<ModeIcon />
</ListItemIcon>
<ListItemText primary = "Drafts" />
</ListItemButton>
</ListItem>
</Tooltip>
</List>
<Divider />
<List>
<ListItem disablePadding>
<ListItemButton>
<ListItemText primary = "Trash" />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton component = "a" href = "#simple-list">
<ListItemText primary = "Spam" />
</ListItemButton>
</ListItem>
</List>
</Box>
);
}