Подсказка Ui материала React с элементом списка

введите здесь описание изображения

Я хочу реализовать всплывающую подсказку пользовательского интерфейса с настраиваемым компонентом всплывающей подсказки. который будет использовать всплывающую подсказку, элемент списка, компонент списка из реагирующего материала пользовательского интерфейса

Я пытался использовать элемент списка

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
58
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  1. Установить зависимости многоязыкового пользовательского интерфейса cd в корневой каталог проекта и запустите npm install @mui/material @emotion/react @emotion/styled и npm install @mui/icons-material
  2. Импортируйте необходимые компоненты

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';
  1. Напишите компонент List
    Из https://mui.com/material-ui/react-list/ и https://mui.com/material-ui/react-tooltip/\ У двух первых элементов есть всплывающая подсказка: «Входящие» и «Черновики».

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>
  );
}

Другие вопросы по теме