React material-ui tooltip hover over(fire an event trigger when the item is disabled)

user_13553107 0
Viewed 2138

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

material-ui reactjs tooltip javascript
1 Answers

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.

user_101853260
Related