How to Add a ToolTip on Hover to a Disabled MUI Button

MUI Buttons in a disabled state have CSS property pointer-events set to off. This presents a challenge when we want to show a ToolTip on hover of a disabled button. Simply setting pointer-events: all; does not solve the problem.

In this tutorial I show a clever solution that enables ToolTips on disabled button hover. The goal is to wrap the internal icon with the ToolTip and make sure it takes up all the interior space of the button so the ToolTip appears even on hover of the edge of the button.

Here’s what we will build:

The coding solution below was inspired by this MUI Github issue thread.

Create a MUI Disabled Button with Hover

There are two steps to re-enable hover on a disabled MUI Button:

• Add back pointerEvents: "all"
• Add a child component to the Button that can register events

If you are wondering why we still need a child component to register events, it’s because setting pointerEvents: "all" doesn’t fully restore pointer events on the Button itself (I’m not sure why). However, it does re-enable pointer events on children of the Button.

We need to override the default styling that removed pointer events. Let’s look at dev tools:

In this screenshot, I’ve already overridden the default and restored pointer events. However, notice how pointer-events were set to none by a selector that selects the button root class and the .Mui-disabled class. That’s what I had to use to create the override:

<Button
      disabled
      variant="contained"
      sx={{
        "&.Mui-disabled": {
          pointerEvents: "all"
        }
      }}
    >

Next, I added a div that wraps the button text. This div has a onMouseOver listener to detect hover:

<Button>
  <div onMouseOver={() => { console.log('hovered!'); }}>Hello</div>
</Button>

Now we have a MUI Button component that is both disabled and can detect hover.

Show ToolTip on Hover of Disabled MUI Button

Now instead of a div with text, I am going to inject an icon into the button and wrap the icon with a ToolTip. Here’s the full code for this demo. Below this code we will discuss how to ensure that the button shows a ToolTip even when the edges of the button are hovered.

import * as React from "react";
import Tooltip from "@mui/material/Tooltip";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import Button from "@mui/material/Button";

export default function HoverDisableButton() {
  return (
    <Button
      disabled
      variant="contained"
      sx={{
        padding: 0,
        "&.Mui-disabled": {
          pointerEvents: "all"
        },
        width: 60,
        height: 40
      }}
    >
      <Tooltip title="I Hover!" sx={{ width: "100%", height: "100%" }}>
        <ArrowForwardIosIcon />
      </Tooltip>
    </Button>
  );
}

We can precisely position the ToolTip as desired.

Notice in the code that I set a padding of 0 on the button. Additionally, I set the ToolTip to 100% width and height. These two stylings ensure that the ToolTip shows even when the edge of the button is hovered, because the interior ToolTip takes the entire room of the button.

Here’s everything you need to know to style the ToolTip.