React Material-UI:How to disable tooltip after click it

user_13086748 0
Viewed 7890

I have a tab component in Material-UI and I want to implement a tooltip on it.

My problem is that when I click the tab component, the tooltip is not disappearing. It must disappear after I click on that tab.

Currently, it continues to be visible even after I click on the tab.

How do I rectify that?

<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>
material-ui reactjs css html javascript
3 Answers

If you look at the document of Material-UI tooltip API

You would find a props named disableHoverListener

bool
default: false
Do not respond to hover events.

Set it as True would turn off the tooltip onMouseOver event trigger.

Update

enter image description here

Or you can simply make it totally under control.

By binding the onClick, onMouseOver, onMouseLeave, open to related component.

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>
  );
}

Try it online:

Edit tender-frog-34ekm

user_118722460

You can also implement a generic tooltip with a managed state when to open/close the tooltip.

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>;
}

Once it's ready, you can use it anywhere exactly like the original MUI tooltip.

<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>
user_82816490

The way I solved this was by rendering the tooltip conditionally. In your case I suppose you want the tooltip not to render for the tab of the current active route:

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>
    )
}
user_27845650
Related