JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3094
  • Score
    100M100P100Q117221F
  • License MIT

A lightweight and simple tooltip component for React

Package Exports

  • react-simple-tooltip

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-simple-tooltip) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-simple-tooltip

A lightweight and simple tooltip component for React

Install

npm install --save react-simple-tooltip

react-simple-tooltip

Changelog

See changelog

Demo

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

Usage

Examples

Tooltip example

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

Lint src folder

npm run build

License

See MIT