Skip to content
A powerful and flexible React tooltip and menu library.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ updated test import Feb 21, 2019
puppeteer refactored documentation Feb 17, 2019
.eslintignore renamed library Nov 25, 2018
.eslintrc added further tests & fixed horizontal align bug Nov 4, 2018
.gitignore added lib folder Nov 25, 2018
.travis.yml changed node version Mar 7, 2019 minor changes Nov 6, 2018 renamed repo Feb 6, 2019
LICENSE setup for major refactor Oct 29, 2018
jest.setup.js further refactoring Nov 2, 2018
package.json changed coveralls dev dependency Mar 7, 2019
postinstall.js fixed publishing bug Feb 21, 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.