React-power-tooltip

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

DEMO

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

Installation

NPM

npm install react-power-tooltip

Usage

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 (
            <div 
                style={{ position: 'relative' }}
                onMouseOver={() => this.showTooltip(true)} 
                onMouseLeave={() => this.showTooltip(false)}
            >
                <Tooltip show={this.state.show}>
                    <span>Option 1</span>
                    <span>Option 2</span>
                </Tooltip>
            </div>
        );
    }
}
export default Example;

API

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

Development

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.

Contributors

Justin Rhodes

License

MIT