如何为React Fluent UI下拉框的禁用选项添加悬浮提示？

要给Dropdown里的禁用选项加上Tooltip，你需要利用Dropdown的onRenderOption回调来自定义选项的渲染逻辑，具体实现如下：

1. 导入所需组件 #

确保已导入Tooltip及Dropdown相关依赖：

import { Dropdown, IDropdownOption, DropdownMenuItemType, Stack } from '@fluentui/react';
import { Tooltip } from '@fluentui/react-tooltip';

2. 编写自定义选项渲染函数 #

通过判断选项是否禁用，决定是否用Tooltip包裹该选项：

const renderDropdownOption = (option: IDropdownOption) => {
  if (option.disabled) {
    return (
      <Tooltip content="因不可用而禁用">
        <div>{option.text}</div>
      </Tooltip>
    );
  }
  // 非禁用选项保持默认渲染
  return <div>{option.text}</div>;
};

3. 在Dropdown中应用自定义渲染逻辑 #

将上述函数传给Dropdown的onRenderOption属性：

const options: IDropdownOption[] = [
  { key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' },
  { key: 'orange', text: 'Orange', disabled: true },
];

export const DropdownBasicExample: React.FunctionComponent = () => {
  return (
    <Stack>
      <Dropdown
        placeholder="Select an option"
        label="Basic uncontrolled example"
        options={options}
        onRenderOption={renderDropdownOption}
      />
    </Stack>
  );
};

补充说明 #

• 如果需要给不同禁用选项设置不同提示文本，可以在options数组里给禁用项新增自定义字段，比如tooltipContent: '该选项暂不可用'，然后在渲染函数中用option.tooltipContent作为Tooltip的content值。
• onRenderOption会遍历所有选项并执行自定义渲染逻辑，完全保留原选项的交互行为，仅对禁用项添加Tooltip效果。

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