react-simple-tooltip

react-simple-tooltip

A lightweight and simple tooltip component for React

Install

npm install --save react-simple-tooltip

Changelog

See changelog

Demo

http://xuopled.github.io/react-simple-tooltip/

Usage

Examples

Fixed Tooltip

import 'react-simple-tooltip/lib/index.css'

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 xuopled</div> 
        </Tooltip>
      </div>
    )
  }
}

Hover Tooltip

import 'react-simple-tooltip/lib/index.css'

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 xuopled</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

Lint src folder

npm run build

License

See MIT