https://github.com/hanford/react-tooltip-portal

Small unopinionated react tooltip library that utilizes React 16's Portal API
https://github.com/hanford/react-tooltip-portal

component opensource react reactjs tooltip ui

Last synced: 3 months ago
JSON representation

Small unopinionated react tooltip library that utilizes React 16's Portal API

• Host: GitHub
• URL: https://github.com/hanford/react-tooltip-portal
• Owner: hanford
• Created: 2017-10-02T21:29:46.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-20T19:10:40.000Z (over 5 years ago)
• Last Synced: 2024-04-26T20:49:56.529Z (10 months ago)
• Topics: component, opensource, react, reactjs, tooltip, ui
• Language: JavaScript
• Size: 204 KB
• Stars: 9
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## react-tooltip-portal

Small, unopinionated react tooltip library built using react 16's portal API.

## Install

```

$ npm install react-tooltip-portal --save

```

## Usage

```js

import Tooltip from 'react-tooltip-portal'

class App extends Component {

  state = {

    tipActive: false

  }

  render () {

    return (

      


         this.tipRef = c}

          onMouseEnter={() => this.setState({ tipActive: true })}

          onMouseLeave={() => this.setState({ tipActive: false })}

        />


        

          
Im a tool tip!

        

      

    )

  }

}

```


### Props

* `active`: boolean, the tooltip will be visible if true

* `className`: string, CSS class to apply to the tooltip

* `offset`: number, how far the tooltip gets placed from the parent 

* `parent`: the tooltip will be placed next to this element, must be a React ref

* `position`: top, right, bottom or left. Default to left.

* `timeout`: amount of time to allow for user to hover over tooltip (will stay open if hovering regardless of props.active)

* `tipStyle`: object, override any of the tool tips default styles

MIT © [Jack Hanford](http://jackhanford.com)