reactjs 悬停时React Fluent UI下拉菜单禁用工具提示

bnl4lu3b  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(175)

我需要在React fluent UI的下拉菜单中为禁用选项添加悬停提示。
我可以使用https://www.npmjs.com/package/@fluentui/react-tooltip向单个组件添加工具提示

<Tooltipcontent="Example tooltip">
  <Button/>
</Tooltip>

但如何将类似的行为添加到下拉选项中,并且仅适用于disabled选项,如:“Disabled cause of non avilability”示例下拉列表fluent用户界面代码

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 tokens={stackTokens}>
      <Dropdown
        placeholder="Select an option"
        label="Basic uncontrolled example"
        options={options}
        styles={dropdownStyles}
      />

    </Stack>
  );
};

谢谢

lbsnaicq

lbsnaicq1#

通过循环手动设置选项

<Dropdown placeholder="Select an option" label="Basic uncontrolled example" styles={dropdownStyles}>
        {options.map(option => 
          <Option key={option.key} disabled={option.disabled}>
            {option.disabled  
               ? <Tooltipcontent="Disabled cause of non availability"> option.nam </Tooltip> 
               : <>option.name</>
            }
          </Option>)}
   </Dropdown>

相关问题