OnboardingTooltip

Компонент для отрисовки подсказки, как правило в случаях, когда пользователю хочется представить новый функционал.

Загружается...

Показывать данные подсказки пользователю следует один раз, запоминая факт показа между сессиями. Рекомендуется показывать подсказку сразу после того, как нужный элемент появился в зоне видимости. Воспользуйтесь Intersection Observer API ↗ для реализации такого поведения.

Если хочется снабдить какой-то элемент интерфейса подсказкой, достаточно просто обернуть его в компонент OnboardingTooltip.

Обычно компонент используется в контексте Panel, PanelHeader или FixedLayout, поэтому вам не нужно задумываться о позиционировании подсказки.

Если возникла потребность использовать OnboardingTooltip вне контекста перечисленных компонентов, следуйте следующим инструкциям:

  • в контейнере с прокруткой — замените какой-нибудь элемент, внутри которого нет прокрутки, на <OnboardingTooltipContainer> и добавьте ему css-свойство position: relative (или другую не-static);
  • внутри position: fixed используйте <OnboardingTooltipContainer fixed>.
Загружается...

OnboardingTooltip технически является модальным окном (role="dialog"), а значит у него обязательно должно быть имя — его краткое название. Благодаря этому пользователи вспомогательных технологий знают, что это за элемент и какое у него содержимое.

Задать имя можно с помощью следующих способов:

  • используя свойство title;
  • используя свойство aria-label;
  • используя свойство aria-labelledby;
СвойствоОписание
appearance"accent" | "neutral" | "white" | "black" | "inversion"

Стиль отображения подсказки.

По умолчанию: -
arrowHeightnumber

Высота стрелки. Складывается с mainAxis, чтобы стрелка не залезала на якорный элемент.

По умолчанию: 8
ArrowIconComponentType<SVGAttributes<SVGSVGElement>>

Пользовательская SVG иконка.

Требования:

  1. Иконка по умолчанию должна быть направлена вверх (a.k.a IconUp).
  2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах, растяните кривую по высоте на 1px и увеличьте на этот размер height и viewBox SVG. (смотри https://github.com/VKCOM/VKUI/pull/4496 ↗).
  3. Убедитесь, что компонент принимает все валидные для SVG параметры.
  4. Убедитесь, что SVG и её элементы наследует цвет через fill="currentColor".
  5. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.
По умолчанию: -
arrowOffsetnumber

Сдвиг стрелки относительно текущих координат.

По умолчанию: 0
arrowPaddingnumber

Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.

По умолчанию: 10
arrowRefElement | MutableRefObject<Element | null> | null
По умолчанию: -
childrenReactElement<unknown, string | JSXElementConstructor<any>>

Целевой элемент. Всплывающее окно появится возле него.

По умолчанию: -
classNamestring

Пользовательские css-классы, будут добавлены на root-элемент.

По умолчанию: -
descriptionReactNode

Текст тултипа.

По умолчанию: -
disableArrowboolean

Скрывает стрелку, указывающую на якорный элемент.

По умолчанию: false
disableFlipMiddlewareboolean

Указанное значение placement форсируется, даже если для выпадающего элемента недостаточно места. Не оказывает влияния при placement значениях - 'auto' | 'auto-start' | 'auto-end'

По умолчанию: false
disableFocusTrapboolean

Позволяет отключить захват фокуса.

По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -
isStaticArrowOffsetboolean

Включает абсолютное смещение по arrowOffset.

По умолчанию: false
maxWidthstring | number | null

Перебивает максимальную ширину заданную по умолчанию.

Передача null полностью сбрасывает установку max-width на элемент.

По умолчанию: 220
offsetByCrossAxisnumber

Отступ по вспомогательной оси.

По умолчанию: 0
offsetByMainAxisnumber

Отступ по главной оси.

По умолчанию: 0
onClose((this: void) => void)

Обработчик, который вызывается при нажатии по любому месту в пределах экрана.

По умолчанию: -
onPlacementChangeOnPlacementChange

В зависимости от области видимости, позиция может смениться на более оптимальную, чтобы всплывающий элемент вместился в эту область видимости.

По умолчанию: -
overlayLabelstring

[a11y] Метка для подложки-кнопки, для описания того, что произойдёт при нажатии.

По умолчанию: Закрыть
placementPlacementWithAuto

По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства.

По умолчанию: bottom-start
restoreFocusboolean | (() => boolean | HTMLElement)
По умолчанию: true
shownboolean

Если передан, то всплывающий элемент будет показано/скрыто в зависимости от значения свойства.

По умолчанию: true
titleReactNode

Заголовок тултипа.

По умолчанию: -
titleIdstring

[a11y] Id для заголовка тултипа. Можно использовать для связи элемента с role="dialog" и заголовка через aria-labelledby.

По умолчанию: -