如何基于React Material UI实现含ListItem、List的自定义Tooltip组件

以下是结合Tooltip、List和ListItem实现的可复用自定义组件示例：

import React from 'react';
import Tooltip from '@mui/material/Tooltip';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';

// 自定义Tooltip列表组件
const CustomTooltipList = ({ tooltipTitle, listItems, listStyle }) => {
  return (
    <Tooltip 
      title={tooltipTitle} 
      placement="top"
      arrow // 可选：显示提示箭头
    >
      <List sx={{ ...listStyle, width: '100%', bgcolor: 'background.paper' }}>
        {listItems.map((item, index) => (
          <ListItem key={index} disablePadding sx={{ pl: 2 }}>
            <ListItemText primary={item} />
          </ListItem>
        ))}
      </List>
    </Tooltip>
  );
};

// 组件使用示例
const Demo = () => {
  const demoItems = ['项目A', '项目B', '项目C', '项目D'];
  return (
    <div style={{ padding: '30px' }}>
      <CustomTooltipList 
        tooltipTitle="自定义提示内容" 
        listItems={demoItems}
        listStyle={{ maxWidth: 320 }}
      />
    </div>
  );
};

export default Demo;

核心说明 #

• 通过tooltipTitle传递提示文本，listItems传入列表数据，listStyle可灵活自定义列表容器样式
• 开启arrow属性能让Tooltip显示指向箭头，优化交互体验
• 利用ListItem的disablePadding配合sx调整内边距，可适配不同布局需求

内容的提问来源于stack exchange，提问作者sourabh k