I am new to React and UI in general.
can someone help me to correct this?
I am using Material Ui Tabs in my Component and not able to get a tooltip on one of the disabled Tab.(code snippet added below)
<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>
I am encapsulating my Tab in Span as asked in Material-UI Tabs Documentation for disabled Tabs
https://codesandbox.io/s/wc74r?file=/demo.js
Please help me understand where I am doing wrong. and how to achieve tooltip on disabled Tab in material UI.
Thanks in advance.
this is what I found I while ago and what I'm currently using.
// outside the component
function CloneProps(props) {
const { children, ...other } = props;
return children(other);
}
// when you render the component
<Tabs value={selectedTab} textColor="inherit" indicatorColor="secondary">
<Tab
component={NavLink}
to={`${url}/tab1`}
label="Tab 1"
/>
{/* Hack for 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>
Mauro