# @snack-uikit/tooltip

> `npm i @snack-uikit/tooltip`

Latest version **1.0.1** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/tooltip
pnpm add @snack-uikit/tooltip
yarn add @snack-uikit/tooltip
bun add @snack-uikit/tooltip
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-09-21 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 83.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Сергей Хлупин |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/tooltip
- Repository: https://github.com/cloud-ru-tech/snack-uikit
- Homepage: https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/tooltip
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/tooltip

## Dependencies (5)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [uncontrollable](https://npm.io/package/uncontrollable.md) ^8.0.4
- [@snack-uikit/icons](https://npm.io/package/@snack-uikit/icons.md) ^1.0.1
- [@snack-uikit/utils](https://npm.io/package/@snack-uikit/utils.md) ^5.0.0
- [@snack-uikit/popover-private](https://npm.io/package/@snack-uikit/popover-private.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2026-09-21
- 1.0.1-preview-acb79d0b.0 (preview) — 2026-09-21
- 1.0.1-preview-b2e4ed46.0 — 2026-09-21
- 1.0.1-preview-27969f64.0 — 2026-09-21
- 1.0.1-preview-fe85442f.0 — 2026-09-18
- 0.18.17-preview-fc6b5b87.0 — 2026-08-20
- 0.18.16 — 2026-08-07
- 0.18.16-preview-4e8bfebd.0 — 2026-08-07
- 0.18.16-preview-eff3bc02.0 — 2026-08-03
- 0.18.15 — 2026-07-03
- 0.18.15-preview-74429015.0 — 2026-07-03
- 0.18.15-preview-02d918ac.0 — 2026-07-03
- 0.18.15-preview-6a625dbd.0 — 2026-06-30
- 0.18.14 — 2026-06-24
- 0.18.14-preview-f9bb03b8.0 — 2026-06-08
- … 162 more at https://npm.io/package/@snack-uikit/tooltip/versions

## README

# Tooltip

## Installation
`npm i @snack-uikit/tooltip`

[Changelog](./CHANGELOG.md)

Компонент Tooltip использует под собой компонент PopoverPrivate (readme ниже);

## Description

- Пакет `@snack-uikit/tooltip` предоставляет компоненты для отображения всплывающих подсказок (tooltip) при взаимодействии пользователя с элементами интерфейса.
- Компоненты поддерживают различные триггеры открытия (hover, click, focus), гибкую настройку позиционирования относительно триггер-элемента и управление состоянием открытия/закрытия.
- Tooltip использует компонент `PopoverPrivate` для реализации функциональности всплывающих окон с поддержкой стрелки, автоматического позиционирования и fallback-размещений.

## Tooltip

### Description

- `Tooltip` — универсальный компонент для отображения всплывающих подсказок с произвольным содержимым.
- Компонент оборачивает любой элемент-триггер (children) и показывает подсказку при наведении, клике, фокусе или их комбинации.
- Поддерживает различные триггеры открытия: `hover`, `click`, `focus`, `focusVisible`, а также их комбинации (`hoverAndFocusVisible`, `hoverAndFocus`, `clickAndFocusVisible`).
- Позволяет настроить позиционирование подсказки относительно триггера через проп `placement` (top, bottom, left, right и их варианты с start/end).
- Поддерживает контролируемое и неконтролируемое состояние открытия, задержки открытия/закрытия при hover, автоматическое переключение позиций при нехватке места.
- Может работать с внешней ссылкой на триггер через `triggerRef`, что полезно для элементов с `position: absolute`.
- Figma: [`Tooltip`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=7%3A3034&mode=design).

### Example

```tsx
import { Tooltip } from '@snack-uikit/tooltip';
import { ButtonFilled } from '@snack-uikit/button';
import { Link } from '@snack-uikit/link';

function Example() {
  return (
    <Tooltip
      tip={
        <div>
          Это подсказка с дополнительной информацией
          <br />
          <Link href='#' text='Подробнее' textMode='accent' appearance='invert-neutral' />
        </div>
      }
      trigger='hover'
      placement='top'
    >
      <ButtonFilled label='Кнопка с подсказкой' />
    </Tooltip>
  );
}
```

## QuestionTooltip

### Description

- `QuestionTooltip` — специализированный компонент подсказки с иконкой вопросительного знака, предназначенный для отображения справочной информации рядом с полями форм, заголовками и другими элементами интерфейса.
- Компонент автоматически отображает иконку вопроса в качестве триггера и не требует передачи children.
- Поддерживает два размера иконки: `xs` (16px) и `s` (24px).
- Ограниченный набор триггеров: только `hover` и `click` (в отличие от `Tooltip`, который поддерживает все варианты триггеров).
- Использует `Tooltip` внутри себя, наследуя все возможности позиционирования и управления состоянием.
- Позволяет передать data-атрибуты для триггера через `triggerSupportProps`, что полезно для тестирования и стилизации.
- Figma: [`QuestionTooltip`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=7%3A3108&mode=design).

### Example

```tsx
import { QuestionTooltip } from '@snack-uikit/tooltip';
import { Link } from '@snack-uikit/link';

function Example() {
  return (
    <QuestionTooltip
      tip={
        <div>
          Справочная информация о поле
          <br />
          <Link href='#' text='Узнать больше' textMode='accent' appearance='invert-neutral' />
        </div>
      }
      size='s'
      trigger='click'
      placement='top'
    />
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Tooltip
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| tip* | `ReactNode` | - | Содержимое тултипа |
| disableMaxWidth | `boolean` | - | Отключение ограничения ширины тултипа |
| className | `string` | - | CSS-класс |
| triggerClassName | `string` | - | CSS-класс триггера |
| offset | `number` | 0 | Отступ поповера от его триггер-элемента (в пикселях). |
| open | `boolean` | - | Управляет состоянием показан/не показан. |
| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
| hoverDelayOpen | `number` | - | Задержка открытия по ховеру |
| hoverDelayClose | `number` | - | Задержка закрытия по ховеру |
| triggerRef | `ForwardedRef<ReferenceType \| HTMLElement>` | - | Ref ссылка на триггер |
| disableSpanWrapper | `boolean` | - | Отключает для `isValidElement` внешнюю обертку триггера <br> Пригодится для элементов с `position: absolute` |
| fallbackPlacements | `Placement[]` | - | Цепочка расположений которая будет применяться к поповеру от первого к последнему если при текущем он не влезает. |
| closeOnPopstate | `boolean` | - | Закрывать ли поповер при пекреходе по истории браузера |
| trigger | enum Trigger: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"` | hoverAndFocusVisible | Условие отображения поповера: <br> - `click` - открывать по клику <br> - `hover` - открывать по ховеру <br> - `focusVisible` - открывать по focus-visible <br> - `focus` - открывать по фокусу <br> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br> - `hoverAndFocus` - открывать по ховеру и фокусу <br> - `clickAndFocusVisible` - открывать по клику и focus-visible |
| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Положение поповера относительно своего триггера (children). |
| children | `ReactNode \| ChildrenFunction` | - | Триггер поповера (подробнее читайте ниже) |
## QuestionTooltip
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| tip* | `ReactNode` | - | Содержимое тултипа |
| className | `string` | - | CSS-класс |
| offset | `number` | 0 | Отступ поповера от его триггер-элемента (в пикселях). |
| open | `boolean` | - | Управляет состоянием показан/не показан. |
| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
| hoverDelayOpen | `number` | - | Задержка открытия по ховеру |
| hoverDelayClose | `number` | - | Задержка закрытия по ховеру |
| triggerRef | `ForwardedRef<ReferenceType \| HTMLElement>` | - | Ref ссылка на триггер |
| disableSpanWrapper | `boolean` | - | Отключает для `isValidElement` внешнюю обертку триггера <br> Пригодится для элементов с `position: absolute` |
| fallbackPlacements | `Placement[]` | - | Цепочка расположений которая будет применяться к поповеру от первого к последнему если при текущем он не влезает. |
| closeOnPopstate | `boolean` | - | Закрывать ли поповер при пекреходе по истории браузера |
| placement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Положение поповера относительно своего триггера (children). |
| disableMaxWidth | `boolean` | false | Отключение ограничения ширины тултипа |
| trigger | enum Trigger: `"click"`, `"hover"` | hover | Условие отображения подсказки |
| size | enum Size: `"s"`, `"xs"` | xs | Размер |
| tooltipClassname | `string` | - | CSS-класс контейнера подсказки |
| triggerSupportProps | `WithSupportProps<Record<string, unknown>>` | {} | data-атрибуты для триггера |
| tabIndex | `number` | - |  |
## WithTooltip
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| tooltip | `Omit<TooltipProps, "children">` | - | Настройки для тултипа |
## useElementWithTooltip
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| Element* | `ComponentType<P>` | - | Элемент, который будет обернут тултипом |
| tooltip | `TooltipProps` | - | Настройки для тултипа |


[//]: DOCUMENTATION_SECTION_END

---
_Source: https://npm.io/package/@snack-uikit/tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._