Have you ever wondered how to disable a tooltip in React Material UI after clicking on it? Let

Question

Have you ever wondered how to disable a tooltip in React Material UI after clicking on it? Let

I am working with a Material-UI tab component and I would like to include a tooltip feature.

The issue I am facing is that the tooltip does not disappear when I click on the tab. It should hide after clicking on the tab.

Currently, the tooltip remains visible even after I have clicked on the tab.

Is there a way to fix this behavior?

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

javascript html css reactjs material-ui

Answer 1

Answer №1

Upon reviewing the Material-UI tooltip API documentation

You will come across a property named disableHoverListener

bool
default: false
Prevents response to hover events.

Setting it as True will disable the tooltip trigger on onMouseOver event.

Update

https://i.sstatic.net/oJmbW.gif

Alternatively, you can take complete control of it by binding onClick, onMouseOver, onMouseLeave, open to the 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>
  );
}

Give it a try online:

https://codesandbox.io/s/tender-frog-34ekm?fontsize=14&hidenavigation=1&theme=dark

Answer 2

Upon reviewing the Material-UI tooltip API documentation

You will come across a property named disableHoverListener

bool
default: false
Prevents response to hover events.

Setting it as True will disable the tooltip trigger on onMouseOver event.

Update

https://i.sstatic.net/oJmbW.gif

Alternatively, you can take complete control of it by binding onClick, onMouseOver, onMouseLeave, open to the 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>
  );
}

Give it a try online:

https://codesandbox.io/s/tender-frog-34ekm?fontsize=14&hidenavigation=1&theme=dark

Answer 3

Answer №2

I approached this problem by implementing a conditional rendering of tooltips. If you don't want the tooltip to show up for the tab corresponding to the currently active route, you can follow these steps:

function CustomTooltip({showTooltip, children, ...props}) {

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

}

function TabComponent() {
    const currentLocation = useLocation();

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

Answer 4

I approached this problem by implementing a conditional rendering of tooltips. If you don't want the tooltip to show up for the tab corresponding to the currently active route, you can follow these steps:

function CustomTooltip({showTooltip, children, ...props}) {

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

}

function TabComponent() {
    const currentLocation = useLocation();

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

Answer 5

Answer №3

You have the option to create a customizable tooltip with controlled state for opening and closing.

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

/**
 * MUI Tooltip wrapper that adjusts when focused is lost.
 */
export function ManagedTooltip(props: TooltipProps) {
    const [open, setOpen] = useState<boolean>(false);

    // Encapsulate Tooltip in div for handling mouse events
    return <div style={{ display: 'flex' }}
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onClick={() => setOpen(false)}
    >
        {/* Display original MUI Tooltip with added functionalities */}
        {/* Override open attribute for complete control, and disable internal listeners */}
        <Tooltip {...props} open={open} disableHoverListener disableFocusListener />
    </div>;
}

Once configured, you can easily incorporate it in any part of your application just like the standard 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>

Answer 6

You have the option to create a customizable tooltip with controlled state for opening and closing.

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

/**
 * MUI Tooltip wrapper that adjusts when focused is lost.
 */
export function ManagedTooltip(props: TooltipProps) {
    const [open, setOpen] = useState<boolean>(false);

    // Encapsulate Tooltip in div for handling mouse events
    return <div style={{ display: 'flex' }}
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onClick={() => setOpen(false)}
    >
        {/* Display original MUI Tooltip with added functionalities */}
        {/* Override open attribute for complete control, and disable internal listeners */}
        <Tooltip {...props} open={open} disableHoverListener disableFocusListener />
    </div>;
}

Once configured, you can easily incorporate it in any part of your application just like the standard 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>

Have you ever wondered how to disable a tooltip in React Material UI after clicking on it? Let

Answer №1

Update

Answer №2

Answer №3

Similar questions

Grid element's height does not correspond to the responsive square child dimension

Having issues with Facebook's login API for JavaScript?

Ways to transfer information from a Redux state to a state in a React hook

Manipulating and transforming data through Puppeteer's iterative process into an object structure

Achieve seamless deployment of two React- JS applications on the same domain using Kubernetes. One application will be located in the root while the other will be in a designated path for efficient

How to empty an array once all its elements have been displayed

Is there a way to verify if all the values in an array of objects are identical?

The distinction between a keypress event and a click event

What are the reasons for the failure of parsing this specific Twitter JSON file using Angular $http, and how can I troubleshoot and resolve the issue

What is the best way to include a scrollbar in a modal window?

Creating dynamic divs on button click for my project is something that I must do, and I will

Node replication including a drop-down menu

Tips for implementing a nested ng-repeat with nested JSON array data triggered by a button click

Managing the opening and closing of a Material UI Drawer with a single button/icon in a React Functional Component

ensuring the footer is correctly aligned

What is the best way to calculate the overall number of comments per post when using node.js, react js, and sequelize?

For each item they possess, attach a "!" at the end

The RC-dock library's 'DockLayout' is not compatible with JSX components. The instance type 'DockLayout' is not a valid JSX element and cannot be used as such

Executing php class method through ajax with jQuery without requiring a php handler file

Tips on restricting dates to be equal to or earlier: