Norse Polytheistic Mythology

    react-power-tooltip
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-power-tooltip package

    1.0.2 • Public • Published

    React-power-tooltip

    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

    DEMO

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

    Installation

    NPM

    npm install react-power-tooltip

    Usage

    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

    Install

    npm i react-power-tooltip

    DownloadsWeekly Downloads

    1,177

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    37.9 kB

    Total Files

    9

    Last publish

    Collaborators

    • justinrhodes