材质 UI 工具提示的 stopPropagation答案

【问题标题】：stopPropagation for Material UI Tooltip材质 UI 工具提示的 stopPropagation
【发布时间】：2021-10-27 17:12:07
【问题描述】：

需要 e.stopPropagation() 为父容器中的孩子。它们都被包裹在 Material Ui Tooltip 中。如果将鼠标悬停在孩子上，我会显示两个工具提示。 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>

【问题讨论】：

标签： reactjs material-ui hover tooltip stoppropagation

【解决方案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 以获取此用法的实时工作示例。

【讨论】：