React Material-UI：单击后如何禁用工具提示

Question

我在 Material-UI 中有一个选项卡组件，我想在它上面实现一个工具提示。

我的问题是，当我单击选项卡组件时，工具提示没有消失。 单击该选项卡后，它必须消失。

目前，即使在我单击选项卡后它仍然可见。

我该如何纠正？

<Tabs
  className="navbar-routes"
  value={value}
  style={{ color: 'green'}}
  indicatorColor="secondary"
  onChange={handleChange} 
>
  {
    tabsData.map(({id,title,description}) => {
      return( 
        <ToolTip description={description}>
          <Tab
            style={{ 
              minWidth: 10,
              fontSize: '80%',
              fontWeight: 'bold',
              marginLeft: '-4px',
              marginRight: 4
            }} 
            key={id}
            component={Link}
            to={`/${title}`}
            label={`${title}`}
          />
        </ToolTip>
      );
    }
 )}
  </Tabs>

Answer 1

如果你看一下 Material-UI tooltip API的文档

你会发现一个名为disableHoverListener的道具

布尔值
默认值：假
不响应悬停事件。

将其设置为True将关闭工具提示 onMouseOver 事件触发器。

---

更新

或者你可以简单地让它完全在控制之下。

通过绑定onClick 、 onMouseOver 、 onMouseLeave ， open相关组件。

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

export default function App() {
  const [flg, setFlg] = useState(false);
  const [isHover, setIsHover] = useState(false);
  return (
    <div className="App">
      <Tooltip
        title={"message"}
        aria-label="add"
        placement="bottom"
        open={!flg && isHover}
      >
        <Tab
          label={`Click: ${!flg ? "enabled" : "disabled"}`}
          onClick={() => setFlg(!flg)}
          onMouseOver={() => setIsHover(true)}
          onMouseLeave={() => setIsHover(false)}
        />
      </Tooltip>
    </div>
  );
}

---

在线试一下：

Answer 2

我解决这个问题的方法是有条件地渲染工具提示。 在您的情况下，我想您不希望工具提示为当前活动路线的选项卡呈现：

function ConditionalTooltip({renderTooltip, children, ...props}) {

    return renderTooltip ? <Tooltip {...props}>{children}</Tooltip> : children;

}

function Tabs() {
    const location = useLocation();

    return (
        <Tabs
          className="navbar-routes"
          value={value}
          style={{ color: 'green'}}
          indicatorColor="secondary"
          onChange={handleChange} 
        >
          {
            tabsData.map(({id,title,description}) => {
              return( 
                <ConditionalTooltip 
                    renderTooltip={location.pathname.indexOf(title) === -1} /* only render tooltip on not active urls */
                    title={description}
                >
                  <Tab
                    style={{ 
                      minWidth: 10,
                      fontSize: '80%',
                      fontWeight: 'bold',
                      marginLeft: '-4px',
                      marginRight: 4
                    }} 
                    key={id}
                    component={Link}
                    to={`/${title}`}
                    label={`${title}`}
                  />
                </ConditionalTooltip>
              );
            }
         )}
        </Tabs>
    )
}

Answer 3

您还可以在打开/关闭工具提示时实现具有托管状态的通用工具提示。

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

/**
 * MUI Tooltip wrapper with adaption to the move away once focuses left.
 */
export function ManagedTooltip(props: TooltipProps) {
    const [open, setOpen] = useState<boolean>(false);

    // Wrap Tooltip with div to capture mouse events
    return <div style={{ display: 'flex' }}
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onClick={() => setOpen(false)}
    >
        {/* Show the original MUI Tooltip with all props. */}
        {/* Just override the open attribute to be fully managed, and disable internal listeners */}
        <Tooltip {...props} open={open} disableHoverListener disableFocusListener />
    </div>;
}

一旦准备就绪，您就可以像原始 MUI 工具提示一样在任何地方使用它。

<Tabs
  className="navbar-routes"
  value={value}
  style={{ color: 'green'}}
  indicatorColor="secondary"
  onChange={handleChange} 
>
  {
    tabsData.map(({id,title,description}) => {
      return( 
        <ManagedTooltip description={description}>
          <Tab
            style={{ 
              minWidth: 10,
              fontSize: '80%',
              fontWeight: 'bold',
              marginLeft: '-4px',
              marginRight: 4
            }} 
            key={id}
            component={Link}
            to={`/${title}`}
            label={`${title}`}
          />
        </ManagedTooltip>
      );
    }
 )}
  </Tabs>