Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romainberger/react-portal-tooltip
Awesome React tooltip
https://github.com/romainberger/react-portal-tooltip
react reactjs tooltip
Last synced: 6 days ago
JSON representation
Awesome React tooltip
- Host: GitHub
- URL: https://github.com/romainberger/react-portal-tooltip
- Owner: romainberger
- License: mit
- Created: 2015-08-07T14:56:58.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:14:16.000Z (almost 2 years ago)
- Last Synced: 2024-11-30T17:12:43.325Z (13 days ago)
- Topics: react, reactjs, tooltip
- Language: JavaScript
- Homepage: http://romainberger.github.io/react-portal-tooltip/
- Size: 6.1 MB
- Stars: 405
- Watchers: 8
- Forks: 73
- Open Issues: 53
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - react-portal-tooltip - Awesome React tooltips. (Demos / Tooltip)
- awesome-react-components - react-portal-tooltip - Awesome React tooltips. (UI Components / Tooltip)
- awesome-react-components - react-portal-tooltip - Awesome React tooltips. (UI Components / Tooltip)
README
# React Portal Tooltip
Awesome tooltips.
[](https://travis-ci.org/romainberger/react-portal-tooltip) [](https://www.npmjs.com/package/react-portal-tooltip)
[](https://www.npmjs.com/package/react-portal-tooltip)
## Installation
```shell
$ npm install react-portal-tooltip
```
**Warning** The versions 2.x on npm are compatible with React 16. Corresponding versions for older versions of React:
```shell
# For react v15
$ npm install react-portal-tooltip@1
# For react 0.14
$ npm install [email protected]
# For react 0.13
$ npm install [email protected]
```
## Documentation and demo
[http://romainberger.github.io/react-portal-tooltip/](http://romainberger.github.io/react-portal-tooltip/)
## Usage
```javascript
import React from 'react'
import ToolTip from 'react-portal-tooltip'
class MyComponent extends React.Component {
state = {
isTooltipActive: false
}
showTooltip() {
this.setState({isTooltipActive: true})
}
hideTooltip() {
this.setState({isTooltipActive: false})
}
render() {
return (
This is a cool component
This is the content of the tooltip
)
}
}
```
### Props
* `active`: boolean, the tooltip will be visible if true
* `position`: top, right, bottom or left. Default to right
* `arrow`: center, right, left, top or bottom (depending on the position prop). No arrow when the prop is not sepecified
* `align`: the alignment of the whole tooltip relative to the `parent` element. possible values : center, right, left. Default to center.
* `tooltipTimeout`: timeout for the tooltip fade out in milliseconds. Default to 500
* `parent`: the tooltip will be placed next to this element. Can be the id of the parent or the ref (see example below)
* `group`: string, necessary if you want several independent tooltips
* `style`: object, allows customizing the tooltip. Checkout the [example](https://github.com/romainberger/react-portal-tooltip/blob/master/example/src/style.js) for details.
* `useHover` bool, default to true. If true, the tooltip will stay visible when hovered.
### Parent prop
You can use an id or a ref to reference the parent:
#### id
```javascript
Hover me!!!
This is the content of the tooltip
```
#### ref
```javascript
{ this.element = element }} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
Hover me!!!
This is the content of the tooltip
```
### Stateful ToolTip
If you only use the Tooltip for mouse enter / mouse leave, you may not want to handle the state yourself for all elements. In this case, you can use the stateful version which will do it for you:
Import the stateful version:
```js
import { StatefulToolTip } from "react-portal-tooltip"
```
Then create your parent and give it as a prop to the Tooltip:
```js
const button = Hover me to display the tooltip
return (
Stateful Tooltip content here!
)
```
`StatefulToolTip` takes the same props as `ToolTip`, plus a `className` prop that will be applied to the root element wrapping the parent ([see the example](https://github.com/romainberger/react-portal-tooltip/blob/master/example/src/stateful.js)).
[See the example live](http://romainberger.github.io/react-portal-tooltip/#/stateful).
## Development
```shell
# clone
$ git clone [email protected]:romainberger/react-portal-tooltip.git
# install the dependencies
$ npm install
# go to the example folder, then install more dependencies
$ cd example && npm install
# start the development server with hot reloading
$ npm start
# to build run this command from the root directory
$ npm build
```
## License
MIT