TATA React Tooltip

react portal tooltip

Documentation

Introduction

Tooltip that always stays on top of the screen was created using the React portal feature.

Install

# npm
npm i -D tata-react-tooltip

# yarn
yarn add -D tata-react-tooltip

# pnpm
pnpm add -D tata-react-tooltip

Usage

import { Tooltip } from 'tata-react-tooltip';
import { useRef } from 'react';

const ref = useRef<HTMLDivElement>(null);

Default

<Tooltip
  direction="right"
  parentRef={ref}
  message="hello tooltip!"
>
  <div ref={ref} className="hello">
    Hello Tooltip!
  </div>
</Tooltip>

Dialog

<Tooltip
  dialog
  direction="right"
  parentRef={ref}
  message="hello tooltip!"
>
  <div ref={ref} className="hello">
    Hello Tooltip!
  </div>
</Tooltip>

Custom Style

<Tooltip
  direction="right"
  parentRef={ref}
  message="hello tooltip!"
  bgColor='#9667E9'
  tailColor='#9667E9'
  tailBorderColor='#9667E9'
  customStyle={{ fontSize: '0.9rem', fontWeight: '600' }}
>
  <div ref={ref} className="hello">
    Hello Tooltip!
  </div>
</Tooltip>

API

* : required

| Property | Description | Type | Default | | ------- | ------- | ------- | ------- | | *parentRef | 부모 요소의 ref | RefObject<any> | - | | message | 툴팁에 표시할 메시지 | string | - | | direction | 툴팁이 부모 요소에 상대적으로 나타나는 방향 | tl ￨ top ￨ tr ￨ rt ￨ right ￨ rb ￨ bl ￨ bottom ￨ br ￨ lt ￨ left ￨ lb | top | | customStyle | 툴팁에 적용할 사용자 지정 CSS 스타일 | CSSProperties | - | | leaveDelay | 마우스가 부모 요소에서 떠난 후 툴팁이 사라지기까지의 지연 시간(밀리초) | number | - | | enterDelay | 마우스가 부모 요소에 올려진 후 툴팁이 나타나기까지의 지연 시간(밀리초) | number | - | | color | 툴팁 텍스트의 색상 | string | - | | bgColor | 툴팁 배경의 색상 | string | #333 | | tailColor | 툴팁 꼬리의 색상 | string | #333 | | tailBorderColor | 툴팁 꼬리의 테두리 색상 | string | #333 | | hideTail | 툴팁의 꼬리를 숨길지 여부 | boolean | false | | dialog | 툴팁을 대화 상자 형태로 표시할지 여부 | boolean | false | | dialogIcon | 대화 상자 스타일 툴팁에 표시할 아이콘 | ReactNode | <WarnIcon /> | | dialogBtnText | 대화 상자 스타일 툴팁에 표시할 버튼 텍스트 | string | YES | | customTooltip | 기본 툴팁 대신 사용할 사용자 지정 컴포넌트 | ReactNode | - |