CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
g nav
g nav

Reputation: 191

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

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>

Upvotes: 7

Views: 14763

Answers (3)

Haim Kastner
Haim Kastner

Reputation: 41

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>

Upvotes: 2

keikai
keikai

Reputation: 15146

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

Upvotes: 4

Anwardo
Anwardo

Reputation: 710

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

Upvotes: 2

Related Questions