OnboardingTooltip
Компонент для отрисовки подсказки, как правило в случаях, когда пользователю хочется представить новый функционал.
Концепция
Показывать данные подсказки пользователю следует один раз, запоминая факт показа между сессиями. Рекомендуется показывать подсказку сразу после того, как нужный элемент появился в зоне видимости. Воспользуйтесь Intersection Observer API ↗ для реализации такого поведения.
Использование
Если хочется снабдить какой-то элемент интерфейса подсказкой,
достаточно просто обернуть его в компонент OnboardingTooltip
.
OnboardingTooltipContainer
Обычно компонент используется в контексте Panel
,
PanelHeader
или FixedLayout
, поэтому вам
не нужно задумываться о позиционировании подсказки.
Если возникла потребность использовать OnboardingTooltip
вне контекста перечисленных компонентов,
следуйте следующим инструкциям:
- в контейнере с прокруткой — замените какой-нибудь элемент, внутри которого нет прокрутки,
на
<OnboardingTooltipContainer>
и добавьте ему css-свойствоposition: relative
(или другую не-static
); - внутри
position: fixed
используйте<OnboardingTooltipContainer fixed>
.
Цветовые варианты
Доступность (a11y)
OnboardingTooltip
технически является модальным окном (role="dialog"
),
а значит у него обязательно должно быть имя — его краткое название.
Благодаря этому пользователи вспомогательных технологий знают, что это за элемент и какое у него содержимое.
Задать имя можно с помощью следующих способов:
- используя свойство
title
; - используя свойство
aria-label
; - используя свойство
aria-labelledby
;
Свойства и методы
Свойство | Описание |
---|---|
appearance | "accent" | "neutral" | "white" | "black" | "inversion" Стиль отображения подсказки. По умолчанию: - |
arrowHeight | number Высота стрелки. Складывается с По умолчанию: 8 |
ArrowIcon | ComponentType<SVGAttributes<SVGSVGElement>> Пользовательская SVG иконка. Требования:
По умолчанию: - |
arrowOffset | number Сдвиг стрелки относительно текущих координат. По умолчанию: 0 |
arrowPadding | number Безопасная зона вокруг стрелки, чтобы та не выходила за края контента. По умолчанию: 10 |
arrowRef | Element | MutableRefObject<Element | null> | null По умолчанию: - |
children | ReactElement<unknown, string | JSXElementConstructor<any>> Целевой элемент. Всплывающее окно появится возле него. По умолчанию: - |
className | string Пользовательские css-классы, будут добавлены на root-элемент. По умолчанию: - |
description | ReactNode Текст тултипа. По умолчанию: - |
disableArrow | boolean Скрывает стрелку, указывающую на якорный элемент. По умолчанию: false |
disableFlipMiddleware | boolean Указанное значение По умолчанию: false |
disableFocusTrap | boolean Позволяет отключить захват фокуса. По умолчанию: - |
getRootRef | Ref<HTMLDivElement> По умолчанию: - |
isStaticArrowOffset | boolean Включает абсолютное смещение по По умолчанию: false |
maxWidth | string | number | null Перебивает максимальную ширину заданную по умолчанию. Передача По умолчанию: 220 |
offsetByCrossAxis | number Отступ по вспомогательной оси. По умолчанию: 0 |
offsetByMainAxis | number Отступ по главной оси. По умолчанию: 0 |
onClose | ((this: void) => void) Обработчик, который вызывается при нажатии по любому месту в пределах экрана. По умолчанию: - |
onPlacementChange | OnPlacementChange В зависимости от области видимости, позиция может смениться на более оптимальную, чтобы всплывающий элемент вместился в эту область видимости. По умолчанию: - |
overlayLabel | string [a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии. По умолчанию: Закрыть |
placement | PlacementWithAuto По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства. По умолчанию: bottom-start |
restoreFocus | boolean | (() => boolean | HTMLElement) По умолчанию: true |
shown | boolean Если передан, то всплывающий элемент будет показано/скрыто в зависимости от значения свойства. По умолчанию: true |
title | ReactNode Заголовок тултипа. По умолчанию: - |
titleId | string [a11y] Id для заголовка тултипа.
Можно использовать для связи элемента с По умолчанию: - |