React-power-tooltip is a powerful, fully customizable tooltip library. Besides the traditional tooltip purposes you can easily also use it as your popup or menu library:

- Ready-to-use defaults: Choose between hoverable, static & alert tooltips. - Fully customizable: Easily customize animations & styles to your wishes. - Pixel perfect positioning: Easily align your tooltip to your target element. - No dependencies: no side-strings attached.

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Components     Tooltip     Menu     UI     React     React-component     Reactjs    
Latest version: v1.1.0

React-power-tooltip alternatives and similar libraries

Based on the "Tooltip" category.
Alternatively, view React-power-tooltip alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of React-power-tooltip or a related project?

Add another 'Tooltip' Library



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={this.state.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



*Note that all licence references and agreements mentioned in the React-power-tooltip README section above are relevant to that project's source code only.