react-toggletip

Simple toggletip and tooltip for your react apps

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 |

License

MIT