在 mui（material ui）中，若将 tooltip 直接包裹 menuitem，会导致点击失效、选中状态无法更新；正确做法是将 tooltip 置于 menuitem 内部，并用 `
`（或其它可交互/渲染的 html 元素）包裹文本内容。 元素的事件冒泡与焦点行为，而 Tooltip（尤其是 describeChild={true} 或默认配置下）会接管其子元素的 onMouseEnter/onFocus 等事件，并可能干扰 MenuItem 的事件委托机制。此外，Tooltip 要求其直接子元素必须是有效的 React 节点且能承载 DOM 属性（如 title、aria-describedby），而 MenuItem 本身是一个复合组件，不支持被直接透传事件属性。
在使用 MUI 的 Select 组件时，为 MenuItem 添加 Tooltip 是一种常见需求——例如用于展示额外说明、字段含义或国际化提示。但若错误地将 Tooltip 作为 MenuItem 的父元素（如
根本原因在于：MUI 的 MenuItem 内部依赖原生
✅ 正确写法是将 Tooltip 嵌套在 MenuItem 内部，并确保其子元素为一个普通 HTML 元素（如
、 或
），以保证事件穿透和无障碍支持：
⚠️ 注意事项：
- 不要省略 div（或类似容器）：
❌ 无效； ✅； - 避免使用 describeChild={true} 在此场景——它仅适用于子元素本身不可交互的情况，而 MenuItem 是可交互的，应让 Tooltip 自动管理描述逻辑；
- 若需支持键盘导航（如 Tab / Arrow Keys），确保 div 不阻断 MenuItem 的 tabIndex 和焦点行为（MUI 默认已处理，故推荐用 而非自定义 tabIndex 元素）；
- 如需统一样式，可为 div 添加 sx={{ px: 1, py: 0.5 }} 保持内边距一致性。
? 小技巧：可封装为可复用组件提升可维护性：
const TooltipMenuItem = ({ value, label, tooltip }: { value: any; label: string; tooltip: string; }) => ( ); // 使用遵循该模式后，Select 的值更新、菜单关闭、键盘操作及无障碍支持（如屏幕阅读器读取 tooltip）均可正常工作。
