Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tata-v/tata-react-tooltip
react portal tooltip
https://github.com/tata-v/tata-react-tooltip
npm react scss typescript vite
Last synced: 12 days ago
JSON representation
react portal tooltip
- Host: GitHub
- URL: https://github.com/tata-v/tata-react-tooltip
- Owner: TATA-V
- Created: 2024-05-28T05:27:32.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-20T04:13:15.000Z (4 months ago)
- Last Synced: 2024-09-21T14:13:18.912Z (about 2 months ago)
- Topics: npm, react, scss, typescript, vite
- Language: TypeScript
- Homepage: https://tata-react-tooltip-docs.vercel.app
- Size: 107 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 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
```bash
# npm
npm i -D tata-react-tooltip
# yarn
yarn add -D tata-react-tooltip
# pnpm
pnpm add -D tata-react-tooltip
```
## Usage
```jsx copy
import { Tooltip } from 'tata-react-tooltip';
import { useRef } from 'react';
const ref = useRef(null);
```
### Default
```jsx
Hello Tooltip!
```
### Dialog
```jsx
Hello Tooltip!
```
### Custom Style
```jsx
Hello Tooltip!
```
## API
* : required
| Property | Description | Type | Default |
| ------- | ------- | ------- | ------- |
| *parentRef | 부모 요소의 ref | `RefObject` | - |
| 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` | `` |
| dialogBtnText | 대화 상자 스타일 툴팁에 표시할 버튼 텍스트 | `string` | `YES` |
| customTooltip | 기본 툴팁 대신 사용할 사용자 지정 컴포넌트 | `ReactNode` | - |