Search code examples
javascriptreactjsmaterial-uimodal-dialogpopup

Material UI Tooltip does not appear when rendered inside of a custom Modal component

Here is how my custom Modal component is defined:

function Modal({ open, set_open, children }) {
  const modal_ref = useRef(null);
  useEffect(() => {
    if (open) {
      modal_ref.current.style.display = "block";
    } else {
      modal_ref.current.style.display = "none";
    }
  }, [open]);

  return ReactDom.createPortal(
    <div className="modal-container" ref={modal_ref}>
      <div className="modal-content">{children}</div>
    </div>,
    document.getElementById("root")
  );
}

The children property of the component will contain the tooltip. Or it may actually be the grandchildren.

But either way, it should appear, no?

Solution 
  • .MuiTooltip-popper {
    z-index: 9999999 !important;
}

    As much as I hate using !important, that's what did the trick for me.