React-toggletip NPM

react-toggletip

Simple toggletip and tooltip for your react apps

toggletip

Why?

I wanted a simple light-weight tooltip library for react that just does one good thing and does it well - displaying tooltips on hover

For context as to why it's called a "toggletip", read this blog for details

Features

works on all mainstream browsers
css only tooltip without additional javascript dependencies
uses aria attributes for accessibility and to work with screen readers
works on icons and other elements
supports multiline tooltips

Installation

$ npm install --save react-toggletip

or if you are using yarn

$ yarn add react-toggletip

Demo

https://rcdexta.github.io/react-toggletip

Documentation

ToggleTip component will render a info icon by default. The default icon can be overridden with props given below. If you want to display tooltips over custom content, wrap ToggleTip around the content.

Name	Type	Description
content	String or array of strings	The tooltip content. Pass array of strings if you want multiline tooltips
placement	string	one of `bottom-right`, `bottom`, `bottom-left`,`right`,`left`,`top-right`,`top`,`top-left`
animated	boolean	Disable tooltip animations. Default: true
icon	node	Replace info icon with custom icon
children	node	Display tooltip on top of custom content instead of icons