Simple react tooltip component

Demo

Installation

Install package with npm:

npm i rc-simple-tooltip

Install package with yarn:

yarn add rc-simple-tooltip

Basic Usage

Import Tooltip component:

import Tooltip from 'rc-simple-tooltip';

Wrap your component with Tooltip:

<Tooltip trigger="hover" content="Tooltip content">
  <button>Complete action</button>
</Tooltip>

Tooltip works with any component that supports refs. For custom functional components you need to forward ref:

const Button = React.forwardRef(({children, ...props}, ref) =>
  <button {...props} ref={ref}>{children}</button>
);
<Tooltip trigger="hover" content="Tooltip content">
  <Button>Complete action</Button>
</Tooltip>

Tooltip can be used without any children:

<Tooltip top content="Tooltip content" />

Additionally import styles.css to apply default styling:

import 'rc-simple-tooltip/dist/styles.css';

Props

Name	Type	Default	Description
active	Boolean	true	Show tooltip
content	Node	null	Tooltip content
position	'left'|'right'|'top'|'bottom'	null	Tooltip position
trigger	'click'|'focus'|'hover'	null	Tooltip activation trigger
className	String	null	className value
styles	Object	null	styles value

Running locally

With yarn:

yarn start

With npm:

npm start