Information displayed when Tab is inactive - Material Ui and React

Just diving into the world of React and UI design, seeking some guidance on an issue I'm facing.

I'm working on implementing Material Ui Tabs in my Component, but struggling to get a tooltip to show on a disabled Tab. Here's a snippet of my code:

<Tooltip title={sample_title}>
       <span>
          <Tab
          disabled
          value={some_Random_title}
          classes={tabStyleOne}
          label={
          (
           <Typography variant="caption" align="center" classes={renditionHeader}>
           {some_random-text}
           </Typography>
          )
          }
         />
     </span>
</Tooltip>

Following the guidelines from Material-UI Tabs Documentation, I've wrapped my Tab in a Span for disabled Tabs.

https://codesandbox.io/s/wc74r?file=/demo.js

If anyone can point out where I might be going wrong and how to successfully add a tooltip to a disabled Tab in Material UI, I'd greatly appreciate it.

Thank you in advance for any help!

javascriptcssreactjsmaterial-uitabs

Answer №1

Here is something I discovered a while back and have been using ever since.

// Definition of function outside the component
function CloneProps(props) {
  const { children, ...other } = props;
  return children(other);
}

// Implementation when rendering the component
<Tabs value={selectedTab} textColor="inherit" indicatorColor="secondary">
  <Tab 
    component={NavLink} 
    to={`${url}/tab1`} 
    label="Tab 1" 
  />
  {/* Trick for displaying tooltip on disabled tab */}
  <CloneProps>  
    { tabProps => (
      <Tooltip title={tabIsDisabled ? "Tooltip title" : ""} arrow>
        <div>
          <Tab 
            {...tabProps}
            component={NavLink} 
            to={`${url}/tab2`}
            label="Tab 2" 
            disabled={tabIsDisabled}
          />
        </div>
      </Tooltip>
    )}
  </CloneProps>
</Tabs>

From Mauro

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The FormData function is unable to retrieve the input fields of a form

My Unique Code <!DOCTYPE html> <html> <body> <div id="custom-form-sample"> <form enctype="multipart/form-data"> <input type="text" name="custom-text" /> <input type="radio" name="custom-radio" ...

javascripthtmlforms

What steps can be taken to effectively build a test suite architecture using Jest?

After exploring all the available resources on the Jest documentation website, including various guides and examples, I have yet to find a solution to my specific question. I am in search of a methodology that would enable me to individually run test case ...

javascriptnode.jstypescriptunit-testingjestjs

ReactJS/NextJS - How using useState can cause the tab to crash

When running the code setOpenAddFolders(true) at line #27, the entire tab freezes. I've tried various solutions and searched extensively, but nothing has worked. I have used similar code (setting a useState variable) in another file and it works fine ...

reactjsnext.jscrashuse-statefreeze

Display a div upon loading with the help of Jquery

Two divs are causing me trouble! <div id="loader"> </div> and <div id="wrapper"> </div> "The wrapper div is not located inside the loader div just to clarify." This is my code: $(window).bind("load",function() { $(&apos ...

jquerycssloadingwrapper

The specified function 'isFakeTouchstartFromScreenReader' could not be located within the '@angular/cdk/a11y' library

I encountered the following errors unexpectedly while working on my Angular 11 project: Error: ./node_modules/@angular/material/fesm2015/core.js 1091:45-77 "export 'isFakeTouchstartFromScreenReader' was not found in '@angular/cdk/a11y&a ...

javascriptangulartypescriptdependency-managementangular-cdk

Delay the closure of a window by utilizing a straightforward method when selecting the "X - CLOSE" option with the following code: `<a href="javascript:window.open('', '_self').close();">X - CLOSE</a>`

I need to implement a delay when users click on the link to close a window. The purpose of this delay is to allow time for playing random "signoff" audio files, such as "Thanks!" or "See you next time!". Currently, without the delay, the audio stops abrupt ...

javascriptjqueryhtml

What is the significance of curly braces within function parameter declarations in JavaScript?

Recently, I have been exploring a tutorial that delves into setting up React with Redux. While following along, I came across some unfamiliar syntax involving curly braces within function parameter definitions. Can someone explain what purpose these serve? ...

javascriptreactjsreduxbabeljs

Incorporate a notification into the Windows notification center without it being visibly displayed on the desktop

I am currently developing an Electron application that includes a custom Notification feature. This feature involves html5 divs appearing and disappearing as necessary on a frameless, transparent, always-on-top window. Although the feature works well, I s ...

htmlnode.jsreactjswindowsnotifications

Tips for extracting and structuring strings from unstructured CSV data using JavaScript?

From a public source, I've extracted a string of allergy data: Cedar 679 gr/m3 High, Grass 20 gr/m3 Medium, Trees 80 gr/m3 Medium, Molds Low. Although the number of items may vary, the standard format for trees and grasses is consistent, with allerge ...

javascriptnode.jsjsoncsv

Using jQuery to animate a div within a PHP echo statement

<li> <a id="collection" href="collections.php"> <span class="glyphicon glyphicon-th white"> Collections</span> </a> </li> <?php include "pagination.php" ?> <script> $("#collection").clic ...

javascriptphpjqueryajax

Stacking a Bootstrap column above another column

Is there a way to stack a bootstrap column on top of another column while maintaining its size and responsiveness? Consider this scenario with 4 columns arranged in a row: https://i.sstatic.net/qug0g.png Upon clicking the Overlay btn, the E column shoul ...

htmlcsscss-positionbootstrap-5

When refreshing the page on Next.js, the router.query may become undefined. However, if you navigate to the page using the Link component

When I navigate to a page with the correct id in the URL, the router.query is empty when I refresh, but it works if I navigate towards it through a Link component. Assuming I have /pages/[user]/index.js <Link href="/[user]/media/[mediaId]" ...

reactjsreact-hooksreact-routernext.jsrouter

JavaScript and jQuery validation issues persisting

Here is the HTML code I am using: <script src="js/validate.js"></script> <label>FIRST NAME:</label> <td> <input type="text" class="firstname" id="firstname" onKeyUp="firstname()" /> </td> <td> <label id=" ...

javascripthtmlvalidation

What is the best practice for using templates in a constructor versus connectedCallback?

Should I apply template in the constructor or connectedCallback of a custom element? In my experience, when I apply it in connectedCallback, sometimes attributeChangedCallback is called before and I can't query for elements. export class TestElement ...

javascriptweb-componentcustom-elementhtml5-template

Issue with ReactJS not applying classes based on conditions

I'm currently working on toggling a class on an element when a user clicks. However, I am facing an issue where my code only sets the class for a single element and does not refresh for subsequent clicks. Even though the set class is not being removed ...

cssreactjsreact-nativereact-reduxmaterial-ui

Disable a tab or menu item if the bean's boolean value is 'false'

I designed a home page with various menu/tab options that redirect the user when clicked, but only if they have access to that specific item. If access is not granted, the menu item becomes unclickable. While this functionality works, I am interested in en ...

htmlcssangulartypescript

Conceal different text when a div with a specific class includes particular text

Is there a way to dynamically add a class to a div based on the content of another div on the same page? Here is a snippet of my HTML: window.addEventListener("load", () => { let b = document.getElementsByClassName('aw-property-data-item') ...

javascripthtmlcss

Utilizing extra CSS for a full-width Wordpress featured image makes for a visually stunning design

Is there a way to customize the CSS of a featured image in Wordpress Version 5.9.2 to appear full width? Currently, the image has a large margin and does not fill the entire width as seen on the page below: I attempted to achieve this by adding code to th ...

phphtmlcsswordpress

Error: AngularJS form validation is not working properly

I've been following the AngularJS documentation, but I'm having trouble with my validations. The error messages are not showing up and the minimum length restrictions for the form fields are not working: <form name="callbackForm" ng-submit="r ...

javascriptangularjs

Utilizing the array.map method in React to implement a ternary operator

Presented here is an array: var CountryList = [{ name: Canada, value: 1 }, { name: USA, value: 2 }] The current operation being utilized is: var filterStr = nextProps.Country.value == "1" ? 'Canada' : 'USA'; Now the objective is ...

reactjsreduxreact-redux