Исходник ↗Песочница ↗

Tooltip

Небольшое всплывающее окно-подсказка, открывающееся при наведении мыши на children (или при нажатии на мобильных устройствах). В качестве содержимого рекомендуется использовать только текст.

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

Пользовательская стрелка

Воспользуйтесь свойством ArrowIcon, чтобы переопределить иконку, которая используется по умолчанию.

Пользовательский компонент иконки должен удовлетворять следующим требованиям:

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

Хук useTooltip

Вы можете использовать хук useTooltip, который позволяет устанавливать якорный элемент для Tooltip, не прокидывая его в качестве children:

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

Свойства и методы

СвойствоОписание
appearance"accent" | "neutral" | "white" | "black" | "inversion"

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

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

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

По умолчанию: -
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. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.
По умолчанию: -
arrowPaddingnumber

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

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

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

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

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

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

Добавляет возможность закрыть тултип через иконку-крестик.

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

Скрытый текст для кнопки закрытия.

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

Начальное состояние всплывающего элемента.

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

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

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

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

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

Отключает закрытие по нажатию.

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

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

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

Отключает появление при фокусе.

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

Добавляет возможность наводить на тултип.

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

Принудительно скрывает компонент если целевой элемент вышел за область видимости.

По умолчанию: -
hoverDelaynumber | [number, number]

Количество миллисекунд, после которых произойдёт показ/скрытие всплывающего элемента при наведении.

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

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

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

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

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

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

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

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

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

По умолчанию: -
onReferenceHiddenChange((hidden: boolean) => void)

Событие скрытия / раскрытия компонента при использовании свойства hideWhenReferenceHidden.

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

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

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

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

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

Передача boolean позволяет контролировать состояния показа и скрытия вручную. Используйте совместно с onShownChange.

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

Стратегия позиционирования всплывающего элемента.

  • "fixed" - позиционируется, используя position: fixed. Является значением по умолчанию
  • "absolute" - позиционируется, используя position: absolute, относительно ближайшего элемента с position: relative
По умолчанию: -
titleReactNode

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

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

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

По умолчанию: -
usePortalboolean | HTMLElement | RefObject<HTMLElement>

По умолчанию используется document.body.

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

Перебивает zIndex заданный по умолчанию.

По умолчанию: -
Предыдущая
Popper
Следующая
Accordion