Question

我在 reactjs 项目中使用 materialUI ToolTip。当从样式 display: block 块到样式 display: none 时，该块中的工具提示在消失之前会很快消失。

这是我的例子： https://codesandbox.io/s/fade-block-tooltip-ui-lb51f

我在 codesanbox 示例中的问题：当我单击按钮“单击我”时，粉红色块将 display: none 和工具提示在消失之前很快消失。

感谢您的帮助。

Answer 1

我会那样做（见 LIVE example 或下面的片段）。修复的重点是将两个块合并为一个。从长远来看，更容易扩展

import React, { useState } from "react";
import "./styles.css";
import Tooltip from "@material-ui/core/Tooltip";

const style = {
  width: 200,
  height: 200,
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

export default function App() {
  const [open, setOpen] = useState(true);
  const onClick = () => setOpen(!open);
  const backgroundColor = open ? "pink" : "blue";
  const btnText = open ? "Clicl me" : "Back";

  return (
    <div className="App">
      <p>
        My problem: When I click button "Click me", pink block `display: none`
        and tooltip fade before dissapear
      </p>

      <div
        style={{
          ...style,
          backgroundColor
        }}
      >
        <Tooltip title="Tool tip" placement="top">
          <button type="button" onClick={onClick}>
            {btnText}
          </button>
        </Tooltip>
      </div>
    </div>
  );
}

请让我知道它是否有效）

Answer 2

保持原样，但将工具提示包裹在三元组中：

https://codesandbox.io/s/fade-block-tooltip-ui-forked-sphxl?file=/src/App.js

UPD：如果你在你的 DOM 中需要这个，最好自己使用工具提示样式，而不仅仅是将 display: none 添加到父级，因为工具提示有隐藏和显示的动画，需要一些时间来隐藏

当 display= none 时 MaterialUI 工具提示淡出

2 个答案: