Tooltip

Tooltip은 지정된 요소를 hover 하는 경우 정보를 보여줄 수 있도록 사용하는 컴포넌트입니다.

<Tooltip position="right" leaveDelay={0} content="지금 이 페이지를 나가시면 혜택을 받을 수 없어요!" > <Box width={100} height={100} backgroundColor="primary" /> </Tooltip>

<Tooltip
  position="right"
  leaveDelay={0}
  content="지금 이 페이지를 나가시면 혜택을 받을 수 없어요!"
>
  <Box width={100} height={100} backgroundColor="primary" />
</Tooltip>

Loading...

How to use

import { Tooltip } from '@vibrant-ui/components';

Properties

Prop	Type	Default	Description
children	ReactElementChild		Tooltip 을 등장시킬 수 있는 지정 요소
content	string | () => ReactElementChild		Tooltip 안에 등장할 내용
position	bottom | left | right | top | bottom-end | bottom-start | left-end | left-start | right-end | right-start | top-end | top-start	bottom	Tooltip 열리는 위치
offset	number	8	Tooltip 과 지정 요소 사이의 여백 값
maxWidth	number	320	Tooltip 의 최대 너비값
enterDelay	number	100	Tooltip 이 보여지기 까지의 시간
leaveDelay	number	0	Tooltip 이 사라지기 까지의 시간
onOpen	() => void		Tooltip 이 열릴 때 실행할 함수
onClose	() => void		Tooltip 이 닫힐 때 실행할 함수

Usage

children

Tooltip 은 기준 요소가 있어야만 해당 요소를 기준으로 위치를 설정 및 등장할 수 있습니다. Tooltip 이 감싸는 children 이 곧 Tooltip 의 기준 요소가 됩니다. 이 children 은 ReactElementChild 타입이어야 합니다.

<Tooltip
  position="right"
  leaveDelay={0}
  content="지금 이 페이지를 나가시면 혜택을 받을 수 없어요!"
>
  {/* This Box is a pivot element of Tooltip */}
  <Box width={100} height={100} backgroundColor="primary" />
</Tooltip>

위치

Tooltip 의 위치는 position 속성을 통해 bottom, left ,right, top, bottom-end, bottom-start, left-end, left-start, right-end, right-start, top-end, top-start로 설정할 수 있습니다.