Skip to main content

Tooltip

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

Loading...

How to use

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

Properties

PropTypeDefaultDescription
childrenReactElementChildTooltip 을 등장시킬 수 있는 지정 요소
contentstring | () => ReactElementChildTooltip 안에 등장할 내용
positionbottom | left | right | top | bottom-end | bottom-start | left-end | left-start | right-end | right-start | top-end | top-startbottomTooltip 열리는 위치
offsetnumber8Tooltip 과 지정 요소 사이의 여백 값
maxWidthnumber320Tooltip 의 최대 너비값
enterDelaynumber100Tooltip 이 보여지기 까지의 시간
leaveDelaynumber0Tooltip 이 사라지기 까지의 시간
onOpen() => voidTooltip 이 열릴 때 실행할 함수
onClose() => voidTooltip 이 닫힐 때 실행할 함수

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로 설정할 수 있습니다.

Previous
Toast