Skip to content
JavaScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Update webpack-dev-server Mar 21, 2019
src Update to latest babel / webpack Mar 21, 2019
test Uses prop-types according with React v16 May 26, 2017
.editorconfig Add group props Sep 25, 2015
.gitignore Ignore node_modules Apr 7, 2016
.npmignore Add babelrc to npmignore Mar 29, 2016
.travis.yml Updates Node.js version and example folder May 26, 2017
LICENSE.md Initial commit Aug 7, 2015
README.md
babel.config.js Update to latest babel / webpack Mar 21, 2019
index.html Fix bundle path Oct 20, 2015
package.json Update to latest babel / webpack Mar 21, 2019
react-portal-tooltip.gif GIF Sep 25, 2015
yarn.lock Update to latest babel / webpack Mar 21, 2019

README.md

React Portal Tooltip

Awesome tooltips.

Build Status npm version npm downloads

react tooltip

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

You can’t perform that action at this time.