Lightweight React.js Tooltip Component

Category: Others , React , React Native | December 8, 2017
Author: mcumpl
Views Total: 330
Official Page: Go to website
Last Update: December 8, 2017
License: MIT

A lightweight React.js tooltip component that shows onMouseEnter and hides onMouseLeave on devices with mouse or touch.

More features:

  • Uses inline-styles for easy composing of specialized components
  • Can contain rich content (composed of components)
  • Works well on a long lists (eg. financial transactions)
  • Is relatively small (~130 lines of ES6 code incl. default inline-styles)
  • Has no external dependencies except React and ReactDOM
  • Includes TypeScript typings

Installation:

# NPM
$ npm install react-lightweight-tooltip --save

Basic usage:

Import the component.

import {Tooltip} from 'react-lightweight-tooltip';

Use this component.

<Tooltip content="Yes, the default one">Simple black tooltip</Tooltip>

Preview:

Lightweight React.js Tooltip Component