Socket
Socket
Sign inDemoInstall

react-power-tooltip

Package Overview
Dependencies
2
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-power-tooltip


Version published
Maintainers
1
Install size
37.9 kB
Created

Readme

Source

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

PropsTypes / OptionsDefaultDescription
showbool: false, truefalseMount tooltip if true.
fontFamilystring: font family'inherit'Font family of text
fontSizestring: px'inherit'Font size of text
fontWeightstring'bold'Font weight of text
colorstring'inherit'Font color of text
animationstring: fade or bounce'fade'Mount/Unmount anmation. Custom animations: See advanced usage examples.
hoverBackgroundstring: hex colors'#ececec'Background color on hover
hoverColorstring: hex colors'#000000'Font color on hover
backgroundColorstring: hex colors'#ffffff'Background color
alertstring: rgb colorsfalsePulse animation
textBoxWidthstring: px or auto'150px'Width of the text box
paddingstring: px'15px 20px'Padding of text
borderRadiusstring: px'5px'Radius of corners
zIndexstring: number'100'Z-index of tooltip
moveDownstring: px'0px'Downward position adjustment
moveRightstring: px'0px'Right position adjustment
staticboolean: false or truefalseDisable hover animations
flatboolean: false or truefalseDisable shadows
lineSeparatedboolean: false or true or string: css border property'1px solid #ececec'Enable ∓ specify line separation between options
arrowAlignstring: 'start' or 'center' or 'end''start'Positions arrow relative to textbox
positionstring: '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

Keywords

FAQs

Last updated on 21 Feb 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc