Выпадающий список React Fluent UI отключил всплывающую подсказку при наведении
У меня есть требование добавить всплывающую подсказку при наведении на отключенные параметры в раскрывающемся списке в пользовательском интерфейсе React Fluent.
Я могу добавить всплывающую подсказку к отдельному компоненту, используя https://www.npmjs.com/package/@fluentui/react-tooltip
<Tooltipcontent = "Example tooltip">
<Button/>
</Tooltip>
но как добавить подобное поведение к выпадающим опциям и только для disabled опций
например: "Отключена причина недоступности"
пример свободного пользовательского интерфейса с выпадающим меню
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>
);
};
Спасибо
Ответы 1
Пользовательский интерфейс Fluent отображает каждую отключенную опцию как элемент button с атрибутом disabled, что по умолчанию делает его неинтерактивным.
Вот способ решить эту проблему, который, я считаю, также довольно доступен:
Сначала определите свой массив элементов IDropdownOption, чтобы они условно задавали свойства disabled и title:
const options: IDropdownOption[] = [
{ key: 'apple', text: 'Apple' },
{ key: 'orange',
text: 'Orange',
disabled: isOrangeDisabled,
title: isOrangeDisabled ? "This is a disabled tooltip" : ""
},
];
Вам также потребуется определить пользовательскую функцию рендеринга для элементов, чтобы применить красивую всплывающую подсказку:
<Dropdown onRenderOption = {onRenderOption} />
а затем определите такую функцию в своем компоненте:
const onRenderOption = (option: IDropdownOption): JSX.Element => {
return (
<>
{option?.disabled && (
<div className = "interactive">
<TooltipHost content = {option.title}>
<span>{option.text}</span>
</TooltipHost>
</div>
)}
{!option?.disabled && (
<span>{option.text}</span>
)}
</>
);
};
Наконец, этот interactive класс CSS должен быть определен в вашем файле CSS. Это переопределит поведение браузера по умолчанию, делающее элементы disabled неинтерактивными:
.interactive {
pointer-events: auto;
}
Некоторые вещи, которые следует отметить:
- Причина, по которой
titleустанавливается в пустую строку, когда параметр не отключен, заключается в том, что он не имеет строкового значения при отображении интерактивного элемента. Без этого браузер будет отображать всплывающую подсказку при наведении курсора на выбираемый элемент, что выглядит некрасиво. - Использование атрибута
titleдолжно сделать компонент удобным для чтения с экрана и других вспомогательных технологий (хотя я далеко не эксперт). - Шаблон отображает класс
TooltipHostиinteractiveтолько тогда, когда объект отключен, поэтому всплывающая подсказка и это поведение срабатывают только при отключении параметра. Поскольку базовый параметр по-прежнему отключен, вы все равно не сможете его выбрать.