react-simple-tooltip

react-simple-tooltip

A lightweight and simple tooltip component for React

Install

npm install --save react-simple-tooltip

Changelog

See changelog

Usage

Exemple

import React, { Component } from 'react'
import { Tooltip } from 'react-simple-tooltip'

export default class MyComponent extends Component {
  constructor(props, context) {
    super(props, context)

    this.state = {
      tooltipTrigger: null,
    }
  }

  handleHover(trigger) {
    this.setState({
      tooltipTrigger: trigger,
    })
  }

  render() {
    return (
      <div>
        { this.state.tooltipTrigger
          ? (
            <Tooltip placement="top" trigger={ this.state.tooltipTrigger }>
              <div>Line 1</div>
              <div>Line 2</div> 
            </Tooltip>
          )
          : null
        }


        <RandomComponent
          onComponentHover={ ::this.handleHover }
        />
      </div>
    )
  }
}

Props

• placement: String - one of ['top', 'right', 'bottom', 'left']
• theme: String - one of ['black', 'grey', 'blue', 'green', 'yellow', 'red']
• trigger: React element

Development

Clean lib folder

npm run clean

Build lib folder

npm run build

Watch src folder

npm run watch

Lint src folder

npm run build

License

See MIT

Changelog

1.0.0 - 2015-07-01

• Initial release