@snack-uikit/tooltip

Tooltip

Installation

npm i @snack-uikit/tooltip

Changelog

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

Tooltip

Props

name	type	default value	description
hoverDelayClose*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-
hoverDelayOpen*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-
onOpenChange*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-
open*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-
triggerClassName*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-
className*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-	CSS-класс
tip*	ReactNode	-	Содержимое тултипа
disableMaxWidth	boolean	-	Отключение ограничения ширины тултипа @default false
trigger	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	Tooltip.triggers.HoverAndFocusVisible
placement	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	Tooltip.placements.Top

QuestionTooltip

Props

name	type	default value	description
tip*	ReactNode	-	Содержимое тултипа
hoverDelayClose*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-
hoverDelayOpen*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-
onOpenChange*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-
open*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-
className*	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-	CSS-класс
placement	WithSupportProps<{ open?: boolean; onOpenChange?: (isOpen: boolean) => void; outsideClick?: boolean | OutsideClickHandler; placement: Placement; className?: string; triggerClassName?: string; ... 14 more ...; fallbackPlacements?: Placement[]; }>	-
disableMaxWidth	boolean	-	Отключение ограничения ширины тултипа @default false
trigger	enum Trigger: "hover", "click"	Trigger.Hover	Условие отображения подсказки
size	enum Size: "s", "xs"	Size.Xs	Размер
tooltipClassname	string	-	CSS-класс контейнера подсказки
triggerDataTestId	string	-	data-test-id для триггера