Tooltip

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

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

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

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

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

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

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

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

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

Использование `disableTriggerOnFocus`

Использования disableTriggerOnFocus приводит к тому, что единственным механизмом активации тултипа остается "hover", из-за этого события наведения не генерируются при клавиатурной навигации или скринридером.

В связи с этим данное свойство стоит использовать только для декоративных элементов с aria-hidden.

<Tooltip
  aria-hidden="true"
  disableTriggerOnFocus
  description="Какая-то информация"
  aria-label="Тултип с какой-то информацией"
>
  <Button>Якорь</Button>
</Popover>

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

Свойство	Описание
`appearance`	`"accent" \| "neutral" \| "white" \| "black" \| "inversion"` Стиль отображения подсказки. По умолчанию: `-`
`arrowHeight`	`number` Высота стрелки. Складывается с `mainAxis`, чтобы стрелка не залезала на якорный элемент. По умолчанию: `-`
`ArrowIcon`	`ComponentType<SVGAttributes<SVGSVGElement>>` Пользовательская SVG иконка. Требования: Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`). Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах, растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG. (смотри https://github.com/VKCOM/VKUI/pull/4496 ↗). Убедитесь, что компонент принимает все валидные для SVG параметры. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами. По умолчанию: `-`
`arrowPadding`	`number` Безопасная зона вокруг стрелки, чтобы та не выходила за края контента. По умолчанию: `-`
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>` Целевой элемент. Всплывающее окно появится возле него. ⚠️ Если это пользовательский компонент, то он должен: предоставлять параметры либо `getRootRef`, либо `ref` (cм. `React.forwardRef()`) для получения ссылки на DOM-узел; принимать DOM атрибуты и события. По умолчанию: `-`
`className`	`string` Пользовательские css-классы, будут добавлены на root-элемент. По умолчанию: `-`
`closable`	`boolean` Добавляет возможность закрыть тултип через иконку-крестик. Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`. По умолчанию: `-`
`closeIconLabel`	`string` Скрытый текст для кнопки закрытия. По умолчанию: `-`
`defaultShown`	`boolean` Начальное состояние всплывающего элемента. По умолчанию: `-`
`description`	`ReactNode` Текст тултипа. По умолчанию: `-`
`disableArrow`	`boolean` Скрывает стрелку, указывающую на якорный элемент. По умолчанию: `-`
`disableCloseAfterClick`	`boolean` Отключает закрытие по нажатию. По умолчанию: `-`
`disableFlipMiddleware`	`boolean` Указанное значение `placement` форсируется, даже если для выпадающего элемента недостаточно места. Не оказывает влияния при `placement` значениях - `'auto' \| 'auto-start' \| 'auto-end'` По умолчанию: `-`
`disableShiftMiddleware`	`boolean` Позволяет отключить смещение по главной оси, которое не даёт всплывающему элементу выходить за границы видимой области. По умолчанию: `-`
`disableTriggerOnFocus`	`boolean` Отключает появление при фокусе. По умолчанию: `-`
`enableInteractive`	`boolean` Добавляет возможность наводить на тултип. По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`hideWhenReferenceHidden`	`boolean` Принудительно скрывает компонент если целевой элемент вышел за область видимости. По умолчанию: `-`
`hoverDelay`	`number \| [number, number]` Количество миллисекунд, после которых произойдёт показ/скрытие всплывающего элемента при наведении. Чтобы задать разное время на показ и скрытие, передайте массив типа `[<показ>, <скрытие>]`. Используется только для `trigger="hover"`. По умолчанию: `-`
`maxWidth`	`string \| number \| null` Перебивает максимальную ширину заданную по умолчанию. Передача `null` полностью сбрасывает установку `max-width` на элемент. По умолчанию: `-`
`offsetByCrossAxis`	`number` Отступ по вспомогательной оси. По умолчанию: `-`
`offsetByMainAxis`	`number` Отступ по главной оси. По умолчанию: `-`
`onPlacementChange`	`OnPlacementChange` В зависимости от области видимости, позиция может смениться на более оптимальную, чтобы всплывающий элемент вместился в эту область видимости. По умолчанию: `-`
`onReferenceHiddenChange`	`((hidden: boolean) => void)` Событие скрытия / раскрытия компонента при использовании свойства `hideWhenReferenceHidden`. Стоит иметь ввиду, что событие также будет вызвано и при новом рендере компонента По умолчанию: `-`
`onShownChange`	`OnShownChange` Вызывается при каждом изменении видимости всплывающего элемента. По умолчанию: `-`
`placement`	`PlacementWithAuto` По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства. По умолчанию: `-`
`shown`	`boolean` Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте совместно с `onShownChange`. Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`. По умолчанию: `-`
`strategy`	`Strategy` Стратегия позиционирования всплывающего элемента. `"fixed"` - позиционируется, используя `position: fixed`. Является значением по умолчанию `"absolute"` - позиционируется, используя `position: absolute`, относительно ближайшего элемента с `position: relative` `strategy="absolute"` Рекомендуется использовать с `usePortal={false}`. И нужно не забыть обернуть в элемент с `position: relative` По умолчанию: `-`
`title`	`ReactNode` Заголовок тултипа. По умолчанию: `-`
`titleId`	`string` [a11y] Id для заголовка тултипа. Можно использовать для связи элемента с `role="dialog"` и заголовка через `aria-labelledby`. По умолчанию: `-`
`usePortal`	`boolean \| HTMLElement \| RefObject<HTMLElement>` По умолчанию используется document.body. По умолчанию: `-`
`zIndex`	`string \| number` Перебивает zIndex заданный по умолчанию. По умолчанию: `-`

Свойство	Описание
`appearance`	`"accent" \| "neutral" \| "white" \| "black" \| "inversion"` Стиль отображения подсказки. По умолчанию: `neutral`
`arrowHeight`	`number` Высота стрелки. Складывается с `mainAxis`, чтобы стрелка не залезала на якорный элемент. По умолчанию: `8`
`ArrowIcon`	`ComponentType<SVGAttributes<SVGSVGElement>>` Пользовательская SVG иконка. Требования: Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`). Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах, растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG. (смотри https://github.com/VKCOM/VKUI/pull/4496 ↗). Убедитесь, что компонент принимает все валидные для SVG параметры. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами. По умолчанию: `-`
`arrowPadding`	`number` Безопасная зона вокруг стрелки, чтобы та не выходила за края контента. По умолчанию: `10`
`className`	`string` Пользовательские css-классы, будут добавлены на root-элемент. По умолчанию: `-`
`closable`	`boolean` Добавляет возможность закрыть тултип через иконку-крестик. Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`. По умолчанию: `-`
`closeIconLabel`	`string` Скрытый текст для кнопки закрытия. По умолчанию: `-`
`defaultShown`	`boolean` Начальное состояние всплывающего элемента. По умолчанию: `-`
`description`	`ReactNode` Текст тултипа. По умолчанию: `-`
`disableArrow`	`boolean` Скрывает стрелку, указывающую на якорный элемент. По умолчанию: `false`
`disableCloseAfterClick`	`boolean` Отключает закрытие по нажатию. По умолчанию: `false`
`disableFlipMiddleware`	`boolean` Указанное значение `placement` форсируется, даже если для выпадающего элемента недостаточно места. Не оказывает влияния при `placement` значениях - `'auto' \| 'auto-start' \| 'auto-end'` По умолчанию: `false`
`disableShiftMiddleware`	`boolean` Позволяет отключить смещение по главной оси, которое не даёт всплывающему элементу выходить за границы видимой области. По умолчанию: `false`
`disableTriggerOnFocus`	`boolean` Отключает появление при фокусе. По умолчанию: `false`
`enableInteractive`	`boolean` Добавляет возможность наводить на тултип. По умолчанию: `false`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`hideWhenReferenceHidden`	`boolean` Принудительно скрывает компонент если целевой элемент вышел за область видимости. По умолчанию: `-`
`hoverDelay`	`number \| [number, number]` Количество миллисекунд, после которых произойдёт показ/скрытие всплывающего элемента при наведении. Чтобы задать разное время на показ и скрытие, передайте массив типа `[<показ>, <скрытие>]`. Используется только для `trigger="hover"`. По умолчанию: `150`
`maxWidth`	`string \| number \| null` Перебивает максимальную ширину заданную по умолчанию. Передача `null` полностью сбрасывает установку `max-width` на элемент. По умолчанию: `-`
`offsetByCrossAxis`	`number` Отступ по вспомогательной оси. По умолчанию: `0`
`offsetByMainAxis`	`number` Отступ по главной оси. По умолчанию: `8`
`onPlacementChange`	`OnPlacementChange` В зависимости от области видимости, позиция может смениться на более оптимальную, чтобы всплывающий элемент вместился в эту область видимости. По умолчанию: `-`
`onReferenceHiddenChange`	`((hidden: boolean) => void)` Событие скрытия / раскрытия компонента при использовании свойства `hideWhenReferenceHidden`. Стоит иметь ввиду, что событие также будет вызвано и при новом рендере компонента По умолчанию: `-`
`onShownChange`	`OnShownChange` Вызывается при каждом изменении видимости всплывающего элемента. По умолчанию: `-`
`placement`	`PlacementWithAuto` По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства. По умолчанию: `bottom`
`shown`	`boolean` Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте совместно с `onShownChange`. Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`. По умолчанию: `-`
`strategy`	`Strategy` Стратегия позиционирования всплывающего элемента. `"fixed"` - позиционируется, используя `position: fixed`. Является значением по умолчанию `"absolute"` - позиционируется, используя `position: absolute`, относительно ближайшего элемента с `position: relative` `strategy="absolute"` Рекомендуется использовать с `usePortal={false}`. И нужно не забыть обернуть в элемент с `position: relative` По умолчанию: `-`
`title`	`ReactNode` Заголовок тултипа. По умолчанию: `-`
`titleId`	`string` [a11y] Id для заголовка тултипа. Можно использовать для связи элемента с `role="dialog"` и заголовка через `aria-labelledby`. По умолчанию: `-`
`usePortal`	`boolean \| HTMLElement \| RefObject<HTMLElement>` По умолчанию используется document.body. По умолчанию: `-`
`zIndex`	`string \| number` Перебивает zIndex заданный по умолчанию. По умолчанию: `var(--vkui--z_index_popout)`

Popper

Accordion

Tooltip

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

Хук useTooltip

Доступность (a11y)

Использование disableTriggerOnFocus

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

Tooltip

useTooltip

Использование `disableTriggerOnFocus`