Tooltip

Installation

npm i @snack-uikit/tooltip

Changelog

Компонент 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.

Example

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.

Example

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'
    />
  );
}

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 внешнюю обертку триггера Пригодится для элементов с position: absolute | | fallbackPlacements | Placement[] | - | Цепочка расположений которая будет применяться к поповеру от первого к последнему если при текущем он не влезает. | | closeOnPopstate | boolean | - | Закрывать ли поповер при пекреходе по истории браузера | | trigger | enum Trigger: "click", "hover", "focusVisible", "focus", "hoverAndFocusVisible", "hoverAndFocus", "clickAndFocusVisible" | hoverAndFocusVisible | Условие отображения поповера: - click - открывать по клику - hover - открывать по ховеру - focusVisible - открывать по focus-visible - focus - открывать по фокусу - hoverAndFocusVisible - открывать по ховеру и focus-visible - hoverAndFocus - открывать по ховеру и фокусу - 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 внешнюю обертку триггера Пригодится для элементов с 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 | - | Настройки для тултипа |