Is there a way to disable a specific radio button based on a condition and display a tooltip only for that disabled button?
https://i.stack.imgur.com/niZK1.png
import {Tooltip} from '@mui/material';
<Tooltip
title={
<div>
<span>Tooltip message</span>
<a
href={links}
target="_blank"
rel="noopener noreferrer"
style={{ color: 'blue', textDecoration: 'underline' }}
>
linktext
</a>
</div>
}
arrow
placement="bottom-start"
>
<RadioListComponent
row
aria-labelledby="classname"
defaultValue="one"
sx={{//style } }}
items={listArray.map((option) => ({
...option,
sx: {
...option.sx,
pointerEvents: option.value === 'two' && !enabled ? 'none' : 'auto',
opacity: option.value === 'two' && !enabled ? 0.5 : 1,
},
}))}
{...field}
/>
</Tooltip>
RadioListComponent
const Radio = forwardRef((props: RadioProps, ref: RefType) => {
const { items, action, ...radioGroupProps } = props;
return n (
<MuiRadioGroup {...radioGroupProps} ref={ref}>
{items.map((item, index) => (
<FormControlLabel
value={item.value}
onClick={action}
control={<MuiRadio aria-label={item.label} />}
label={
<>
<Typography component="span" sx={{//style }}>
{item.label}
</Typography>
</Tooltip>
<Typography component="span" sx={{ //style }}>
{item.label}
</Typography>
</>
}
sx={item.sx}
/>
))}
</MuiRadioGroup>
);
});
The issue is with the tooltip displaying when hovering over any radio button, which shouldn't be the case. How can this be resolved? Any suggestions are appreciated. Thank you!