Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
117 lines (91 sloc) 6.33 KB


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.