Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RenoFi/react-tooltip
React tooltip component
https://github.com/RenoFi/react-tooltip
frontend frontend-lib
Last synced: 3 months ago
JSON representation
React tooltip component
- Host: GitHub
- URL: https://github.com/RenoFi/react-tooltip
- Owner: RenoFi
- License: mit
- Archived: true
- Created: 2019-12-09T08:41:31.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-07-19T08:17:00.000Z (5 months ago)
- Last Synced: 2024-08-19T20:40:46.680Z (4 months ago)
- Topics: frontend, frontend-lib
- Language: TypeScript
- Size: 2.08 MB
- Stars: 6
- Watchers: 16
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**IMPORTANT !!! react-tooltip is discontinued and is not maintained anymore**
========================================Simple react tooltip component
========================================[![License](https://img.shields.io/github/license/renofi/react-tooltip)](https://github.com/RenoFi/react-tooltip/blob/master/LICENSE)
[![npm](https://img.shields.io/npm/v/rc-simple-tooltip)](https://www.npmjs.com/package/rc-simple-tooltip)## Demo
![Demo](./media/demo.png?raw=true)
## Installation
Install package with npm:
```
npm i rc-simple-tooltip
```Install package with yarn:
```
yarn add rc-simple-tooltip
```## Basic Usage
Import `Tooltip` component:
```js
import Tooltip from 'rc-simple-tooltip';
```Wrap your component with `Tooltip`:
```js
Complete action
```
Tooltip works with any component that supports refs. For custom functional components you need to forward ref:
```js
const Button = React.forwardRef(({children, ...props}, ref) =>
{children}
);Complete action
```
Tooltip can be used without any children:
```js
```
Additionally import `styles.css` to apply default styling:
```js
import 'rc-simple-tooltip/dist/styles.css';
```## Props
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`active`**|`Boolean`|`true`|Show tooltip|
|**`timeout`**|`Int`|`0`|Time delay before hiding tooltip in `hover` mode|
|**`content`**|`Node`|`null`|Tooltip content|
|**`position`**|`'left'\|'right'\|'top'\|'bottom'`|`null`|Tooltip position|
|**`trigger`**|`'click'\|'focus'\|'hover'`|`null`|Tooltip activation trigger|
|**`className`**|`String`|`null`|className value|
|**`styles`**|`Object`|`null`|styles value|## Running locally
With yarn:
```
yarn start
```With npm:
```
npm start
```