node package manager


React Portal Tooltip

Awesome tooltips.

Build Status npm version npm downloads

react tooltip


$ npm install react-portal-tooltip

Warning The latest version on npm is compatible with React 15. Corresponding versions for older versions of React:

# For react 0.14 
$ npm install react-portal-tooltip@0.14
# For react 0.13 
$ npm install react-portal-tooltip@0.13

Documentation and demo


import React from 'react'
import ToolTip from 'react-portal-tooltip'
class MyComponent extends React.Component {
    state = {
        isTooltipActive: false
    showTooltip() {
        this.setState({isTooltipActive: true})
    hideTooltip() {
        this.setState({isTooltipActive: false})
    render() {
        return (
                <p id="text" onMouseEnter={::this.showTooltip} onMouseLeave={::this.hideTooltip}>This is a cool component</p>
                <ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent="#text">
                        <p>This is the content of the tooltip</p>
                        <img src="image.png"/>


  • active: boolean, the tooltip will be visible if true
  • position: top, right, bottom or left. Default to right
  • arrow: center, right, left, top or bottom (depending on the position prop). No arrow when the prop is not sepecified
  • tooltipTimeout: timeout for the tooltip fade out in milliseconds. Default to 500
  • parent: the tooltip will be placed next to this element
  • group: string, necessary if you want several independant tooltips
  • style: object, allows customizing the tooltip. Checkout the example for details.


# clone 
$ git clone
# install the dependencies 
$ npm install
# go to the example folder, then install more dependencies 
cd example && npm install
# start the development server with hot reloading 
$ npm start
# to build run this command from the root directory 
$ npm build