https://github.com/RenoFi/react-tooltip

React tooltip component
https://github.com/RenoFi/react-tooltip

frontend frontend-lib

Last synced: 18 days 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 (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-07-19T08:17:00.000Z (2 months ago)
• Last Synced: 2024-08-19T20:40:46.680Z (about 1 month 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

```