CODEWITHSUNDEEP
javascriptreactjsmaterial-uitooltip
curiosityrock
curiosityrock

Reputation: 213

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

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

Upvotes: 2

Views: 5462

Answers (1)

itaydafna
itaydafna

Reputation: 2086

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.

Upvotes: 3

Related Questions