@snack-uikit/tooltip v0.17.2
Tooltip
Installation
npm i @snack-uikit/tooltip
Компонент Tooltip использует под собой компонент PopoverPrivate (readme ниже);
Tooltip
Props
| name | type | default value | description |
|---|---|---|---|
| tip* | ReactNode | - | Содержимое тултипа |
| disableMaxWidth | boolean | - | Отключение ограничения ширины тултипа |
| className | string | - | CSS-класс |
| triggerClassName | string | - | CSS-класс триггера |
| open | boolean | - | Управляет состоянием показан/не показан. |
| onOpenChange | (isOpen: boolean) => void | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
| hoverDelayOpen | number | - | Задержка открытия по ховеру |
| hoverDelayClose | number | - | Задержка закрытия по ховеру |
| triggerRef | ForwardedRef<ReferenceType \| HTMLElement> | - | Ref ссылка на триггер |
| disableSpanWrapper | boolean | - | Отключает для isValidElement внешнюю обертку триггера Пригодится для элементов с position: absolute |
| fallbackPlacements | Placement[] | - | Цепочка расположений которая будет применяться к поповеру от первого к последнему если при текущем он не влезает. |
| 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-класс |
| open | boolean | - | Управляет состоянием показан/не показан. |
| onOpenChange | (isOpen: boolean) => void | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
| hoverDelayOpen | number | - | Задержка открытия по ховеру |
| hoverDelayClose | number | - | Задержка закрытия по ховеру |
| triggerRef | ForwardedRef<ReferenceType \| HTMLElement> | - | Ref ссылка на триггер |
| disableSpanWrapper | boolean | - | Отключает для isValidElement внешнюю обертку триггера Пригодится для элементов с position: absolute |
| fallbackPlacements | Placement[] | - | Цепочка расположений которая будет применяться к поповеру от первого к последнему если при текущем он не влезает. |
| 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-класс контейнера подсказки |
| triggerDataTestId | string | - | data-test-id для триггера |
| tabIndex | number | - |
10 months ago
7 months ago
4 months ago
7 months ago
4 months ago
8 months ago
6 months ago
6 months ago
6 months ago
4 months ago
5 months ago
8 months ago
4 months ago
7 months ago
6 months ago
6 months ago
4 months ago
7 months ago
6 months ago
10 months ago
7 months ago
7 months ago
4 months ago
10 months ago
8 months ago
3 months ago
8 months ago
8 months ago
10 months ago
4 months ago
7 months ago
10 months ago
9 months ago
9 months ago
7 months ago
7 months ago
4 months ago
5 months ago
7 months ago
4 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
6 months ago
10 months ago
7 months ago
7 months ago
7 months ago
10 months ago
7 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago