React Portal Tooltip

Awesome tooltips.

Installation

$ npm install react-portal-tooltip

Warning The versions 2.x on npm are compatible with React 16. Corresponding versions for older versions of React:

# For react v15
$ npm install react-portal-tooltip@1

# 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

http://romainberger.github.io/react-portal-tooltip/

Usage

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 (
            <div>
                <p id="text" onMouseEnter={this.showTooltip.bind(this)} onMouseLeave={this.hideTooltip.bind(this)}>This is a cool component</p>
                <ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent="#text">
                    <div>
                        <p>This is the content of the tooltip</p>
                        <img src="image.png"/>
                    </div>
                </ToolTip>
            </div>
        )
    }
}

Props

• 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
• align: the alignment of the whole tooltip relative to the parent element. possible values : center, right, left. Default to center.
• tooltipTimeout: timeout for the tooltip fade out in milliseconds. Default to 500
• parent: the tooltip will be placed next to this element. Can be the id of the parent or the ref (see example below)
• group: string, necessary if you want several independent tooltips
• style: object, allows customizing the tooltip. Checkout the example for details.
• useHover bool, default to true. If true, the tooltip will stay visible when hovered.

Parent prop

You can use an id or a ref to reference the parent:

id

<div id="hoverMe" onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
    Hover me!!!
</div>
<ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent="#hoverMe">
    <div>
        <p>This is the content of the tooltip</p>
    </div>
</ToolTip>

ref

<div ref={(element) => { this.element = element }} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
    Hover me!!!
</div>
<ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent={this.element}>
    <div>
        <p>This is the content of the tooltip</p>
    </div>
</ToolTip>

Stateful ToolTip

If you only use the Tooltip for mouse enter / mouse leave, you may not want to handle the state yourself for all elements. In this case, you can use the stateful version which will do it for you:

Import the stateful version:

import { StatefulToolTip } from "react-portal-tooltip"

Then create your parent and give it as a prop to the Tooltip:

const button = <span>Hover me to display the tooltip</span>

return (
  <StatefulToolTip parent={ button }>
    Stateful Tooltip content here!
  </StatefulToolTip>
)

StatefulToolTip takes the same props as ToolTip, plus a className prop that will be applied to the root element wrapping the parent (see the example).

See the example live.

Development

# clone
$ git clone git@github.com:romainberger/react-portal-tooltip.git

# 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

License

MIT