如何为单选按钮组中的禁用单选按钮显示Tooltip？

要实现仅禁用的单选按钮显示Tooltip，需要将Tooltip从外层包裹整个组件的逻辑，改为针对单个禁用项单独包裹，具体修改步骤如下：

1. 修改父组件代码 #

移除外层包裹RadioListComponent的Tooltip，同时给每个单选项添加disabled状态标识，并将Tooltip内容通过props传递给子组件：

// 父组件代码
<RadioListComponent
  row
  aria-labelledby="classname"
  defaultValue="one"
  sx={{ /* 原有样式 */ }}
  // 传递Tooltip内容给子组件
  tooltipContent={
    <div>
      <span>Tooltip message</span>
      <a
        href={links}
        target="_blank"
        rel="noopener noreferrer"
        style={{ color: 'blue', textDecoration: 'underline' }}
      >
        linktext
      </a>
    </div>
  }
  items={listArray.map((option) => {
    const isDisabled = option.value === 'two' && !enabled;
    return ({
      ...option,
      disabled: isDisabled, // 添加禁用状态标识
      sx: {
        ...option.sx,
        pointerEvents: isDisabled ? 'none' : 'auto',
        opacity: isDisabled ? 0.5 : 1,
      },
    })
  })}
  {...field}
/>

2. 修改RadioListComponent组件 #

在子组件中接收tooltipContent props，遍历单选项时根据item.disabled判断是否包裹Tooltip，同时注意给禁用项添加pointerEvents: auto的外层容器（因为禁用项本身设置了pointerEvents: none，会导致Tooltip无法触发hover）：

// RadioListComponent代码
import { Tooltip } from '@mui/material';

const Radio = forwardRef((props: RadioProps & { tooltipContent?: React.ReactNode }, ref: RefType) => {
  const { items, action, tooltipContent, ...radioGroupProps } = props;
  return (
    <MuiRadioGroup {...radioGroupProps} ref={ref}>
      {items.map((item, index) => {
        // 渲染基础单选项
        const radioItem = (
          <FormControlLabel
            value={item.value}
            onClick={action}
            control={<MuiRadio aria-label={item.label} />}
            label={
              <>
                <Typography component="span" sx={{ /* 原有样式 */ }}>
                  {item.label}
                </Typography>
                <Typography component="span" sx={{ /* 原有样式 */ }}>
                  {item.label}
                </Typography>
              </>
            }
            sx={item.sx}
          />
        );

        // 针对禁用项单独包裹Tooltip
        return item.disabled ? (
          <Tooltip
            key={index}
            title={tooltipContent}
            arrow
            placement="bottom-start"
          >
            <div style={{ pointerEvents: 'auto' }}>
              {radioItem}
            </div>
          </Tooltip>
        ) : (
          <React.Fragment key={index}>{radioItem}</React.Fragment>
        );
      })}
    </MuiRadioGroup>
  );
});

核心逻辑说明 #

• 移除全局Tooltip：避免所有单选按钮触发Tooltip
• 单个项判断：通过disabled标识精准控制Tooltip的显示范围
• 修复hover触发问题：禁用项设置了pointerEvents: none，需要外层容器重新开启pointerEvents，才能让Tooltip感知到hover事件

内容的提问来源于stack exchange，提问作者Khushi