React material-ui 工具提示悬停（当项目被禁用时触发事件触发器）

【问题标题】：React material-ui tooltip hover over(fire an event trigger when the item is disabled)React material-ui 工具提示悬停（当项目被禁用时触发事件触发器）
【发布时间】：2020-12-20 19:44:25
【问题描述】：

我知道禁用的项目不会触发任何事件，可能的解决方法是将我的元素包装在另一个我尝试过但没有奏效的元素中。我想不出另一种将鼠标悬停在禁用的工具提示上的解决方案。这是我的沙盒

import React from "react";
import "./styles.css";
import MenuItem from "@material-ui/core/MenuItem";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  const content = (
    <Tooltip title="hover over">
      <p>Hey</p>
    </Tooltip>
  );
  return (
    <MenuItem disabled component="div">
      {content}
    </MenuItem>
  );
}

https://codesandbox.io/s/beautiful-wing-mgowh?fontsize=14&hidenavigation=1&theme=dark

【问题讨论】：

标签： javascript reactjs material-ui tooltip

【解决方案1】：

为了让工具提示显示您需要用<div> 包装禁用的MenuItem，然后用Tooltip 包装它：

export default function App() {
  const content = (
    <span title="lol">
      <p title="lol">Hey</p>
    </span>
  );
  return (
    <Tooltip
      title="hover over"
    >
      <div style={{ display: "inline-block" }}>
        <MenuItem disabled component="div">
          {content}
        </MenuItem>
      </div>
    </Tooltip>
  );
}

结帐this sandbox，其中我还在Tooltip 上使用了PopperProps，以便让它显示在MenuItem 旁边。您可以使用 marginTop 和 marginLeft 值来调整它以适应您的用例。

【讨论】：