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

Examples

Fixed Tooltip

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

export default class MyComponent {
  render() {
    return (
      <div>
        <Tooltip>
          <div>react-simple-tooltip</div>
          <div>By cedricdelpoux</div> 
        </Tooltip>
      </div>
    )
  }
}

Hover Tooltip

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>react-simple-tooltip</div>
              <div>By cedricdelpoux</div> 
            </Tooltip>
          )
          : null
        }


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

Props

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

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.3 - 2015-07-03

• Added: fixed tooltip example