Material UI 工具提示的停止传播

Question

需要 e.stopPropagation() 用于父容器中的子项。它们都包含在 Material Ui 工具提示中。如果将鼠标悬停在子项上，我会同时显示两个工具提示。 onOpen={e => e.stopPropagation()} 没有帮助

      <Tooltip title="main container">
        <Button style={{ background: "red", color: "white" }}>
          <Tooltip title="child container">
            <Button
              style={{ background: "green", color: "white" }}
            >
              Child
            </Button>
          </Tooltip>
        </Button>
      </Tooltip>

Answer 1

您可以通过处理父按钮和子按钮上的 onMouseEnter 和 onMouseLeave 事件手动 trigger 打开工具提示，如果子按钮的状态是这样打开的，则隐藏父按钮的工具提示：

import { useState } from "react";
import { Button, Tooltip } from "@mui/material";

export default function App() {
  const [parentOpen, setParentOpen] = useState(false);
  const [childOpen, setChildOpen] = useState(false);

  return (
    <div>
      <Tooltip
        title="main container"
        open={!childOpen && parentOpen}
        disableHoverListener
      >
        <Button
          style={{ background: "red", color: "white" }}
          onMouseEnter={() => setParentOpen(true)}
          onMouseLeave={() => setParentOpen(false)}
        >
          <Tooltip
            title="child container"
            open={childOpen}
            disableHoverListener
          >
            <Button
              style={{ background: "green", color: "white" }}
              onMouseEnter={() => setChildOpen(true)}
              onMouseLeave={() => setChildOpen(false)}
            >
              Child
            </Button>
          </Tooltip>
        </Button>
      </Tooltip>
    </div>
  );
}

您可以查看 this sandbox 以了解此用法的实际工作示例。

Material UI 工具提示的停止传播

stopPropagation for Material UI Tooltip

reactjs

material-ui

hover

tooltip

stoppropagation