react-tooltip-portal
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.2 • Public • Published

    react-tooltip-portal

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

    Install

    $ npm install react-tooltip-portal --save
    

    Usage

    import Tooltip from 'react-tooltip-portal'
     
    class App extends Component {
      state = {
        tipActive: false
      }
     
      render () {
        return (
          <div className="App">
            <img
              src={logo}
              ref={c => this.tipRef = c}
              onMouseEnter={() => this.setState({ tipActive: true })}
              onMouseLeave={() => this.setState({ tipActive: false })}
            />
     
            <Tooltip
              active={this.state.tipActive}
              parent={this.tipRef}
              position='left'
              tipStyle={{color: 'red'}}
            >
              <div>Im a tool tip!</div>
            </Tooltip>
          </div>
        )
      }
    }

    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

    Install

    npm i react-tooltip-portal

    DownloadsWeekly Downloads

    3

    Version

    0.5.2

    License

    MIT

    Unpacked Size

    9.71 kB

    Total Files

    4

    Last publish

    Collaborators

    • hanford