@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 | - |
7 months ago
4 months ago
2 months ago
4 months ago
1 month ago
6 months ago
4 months ago
4 months ago
4 months ago
2 months ago
3 months ago
6 months ago
1 month ago
4 months ago
4 months ago
4 months ago
2 months ago
4 months ago
4 months ago
7 months ago
4 months ago
4 months ago
1 month ago
7 months ago
6 months ago
28 days ago
6 months ago
6 months ago
7 months ago
2 months ago
4 months ago
8 months ago
7 months ago
7 months ago
4 months ago
4 months ago
1 month ago
3 months ago
4 months ago
1 month ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
4 months ago
7 months ago
4 months ago
4 months ago
4 months ago
7 months ago
4 months ago
7 months ago
9 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
1 year ago
10 months ago
1 year ago
1 year ago
12 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
10 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
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