Skip to content
A powerful and flexible React tooltip and menu library.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ updated test import Feb 21, 2019
lib fixed publishing bug Feb 21, 2019
src fixed scroll bug in docs Mar 7, 2019
.eslintrc added further tests & fixed horizontal align bug Nov 4, 2018
.npmignore minor changes Feb 6, 2019
.travis.yml renamed repo Feb 6, 2019
LICENSE refactored docs layout Mar 2, 2019
package-lock.json fixed publishing bug Feb 21, 2019
package.json changed coveralls dev dependency Mar 7, 2019


Travis (.org) Coveralls github branch npm bundle size (minified + gzip)

A powerful and elegant alternative for all your tooltips and menu needs.

  • Different Types - For every use context: Choose between Hoverable, Static & Alert tooltips.
  • Fully Customizable - Easily change default settings via props
  • Reliable Positioning - Align your tooltip to your target element with ease
  • Advanced Customization - Add your own animations and styles via separate CSS files


Check out the documentation & demo pages to see all use cases.



npm install react-power-tooltip


Important: Set the position of the hoverable parent component to relative.

import React, { Component } from "react";
import Tooltip from "react-power-tooltip";

class Example extends Component {
    state = {
        show: false

    showTooltip = bool => {
        this.setState({ show: bool })
    render() {
        return (
                style={{ position: 'relative' }}
                onMouseOver={() => this.showTooltip(true)} 
                onMouseLeave={() => this.showTooltip(false)}
                <Tooltip show={}>
                    <span>Option 1</span>
                    <span>Option 2</span>
export default Example;


Props Types / Options Default Description
show bool: false, true false Mount tooltip if true.
fontFamily string: font family 'inherit' Font family of text
fontSize string: px 'inherit' Font size of text
fontWeight string 'bold' Font weight of text
color string 'inherit' Font color of text
animation string: fade or bounce 'fade' Mount/Unmount anmation. Custom animations: See advanced usage examples.
hoverBackground string: hex colors '#ececec' Background color on hover
hoverColor string: hex colors '#000000' Font color on hover
backgroundColor string: hex colors '#ffffff' Background color
alert string: rgb colors false Pulse animation
textBoxWidth string: px or auto '150px' Width of the text box
padding string: px '15px 20px' Padding of text
borderRadius string: px '5px' Radius of corners
zIndex string: number '100' Z-index of tooltip
moveDown string: px '0px' Downward position adjustment
moveRight string: px '0px' Right position adjustment
static boolean: false or true false Disable hover animations
flat boolean: false or true false Disable shadows
lineSeparated boolean: false or true or string: css border property '1px solid #ececec' Enable ∓ specify line separation between options
arrowAlign string: 'start' or 'center' or 'end' 'start' Positions arrow relative to textbox
position string: 'position1 position2' 'right center' Positions tooltip relative to target element


You're welcome to contribute to react-power-tooltip.

To set up the project:

  1. Fork and clone the repository
  2. $ npm install
  3. $ npm run dev

The demo page will then be served on http://localhost:8000/ in watch mode, meaning you don't have refresh the page to see your changes.


Justin Rhodes



You can’t perform that action at this time.