Tata-react-tooltip NPM

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`	-