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

Question

i know that disabled item doesn't trigger any event and the possible workaround is to wrap my elements in another which i tried but it didn't work. I can't think of another solution to hover over a disabled tooltip. Here's the sandbox i have

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

Answer 1

In order to get the tooltip to show you need to wrap the disabled MenuItem with a <div> and then wrap it with the 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>
  );
}

Checkout this sandbox in which I also used PopperProps on the Tooltip in order to get it to show next to the MenuItem . You can play around with the marginTop and marginLeft values in order to adjust it to your use-case.