Nefariously Programmed Mecha

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

    2.4.7 • Public • Published

    React Portal Tooltip

    Awesome tooltips.

    Build Status npm version npm downloads

    react tooltip

    Installation

    $ npm install react-portal-tooltip

    Warning The versions 2.x on npm are compatible with React 16. Corresponding versions for older versions of React:

    # For react v15 
    $ npm install react-portal-tooltip@1
     
    # For react 0.14 
    $ npm install react-portal-tooltip@0.14
     
    # For react 0.13 
    $ npm install react-portal-tooltip@0.13

    Documentation and demo

    http://romainberger.github.io/react-portal-tooltip/

    Usage

    import React from 'react'
    import ToolTip from 'react-portal-tooltip'
     
    class MyComponent extends React.Component {
        state = {
            isTooltipActive: false
        }
        showTooltip() {
            this.setState({isTooltipActive: true})
        }
        hideTooltip() {
            this.setState({isTooltipActive: false})
        }
        render() {
            return (
                <div>
                    <p id="text" onMouseEnter={this.showTooltip.bind(this)} onMouseLeave={this.hideTooltip.bind(this)}>This is a cool component</p>
                    <ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent="#text">
                        <div>
                            <p>This is the content of the tooltip</p>
                            <img src="image.png"/>
                        </div>
                    </ToolTip>
                </div>
            )
        }
    }

    Props

    • active: boolean, the tooltip will be visible if true
    • position: top, right, bottom or left. Default to right
    • arrow: center, right, left, top or bottom (depending on the position prop). No arrow when the prop is not sepecified
    • align: the alignment of the whole tooltip relative to the parent element. possible values : center, right, left. Default to center.
    • tooltipTimeout: timeout for the tooltip fade out in milliseconds. Default to 500
    • parent: the tooltip will be placed next to this element. Can be the id of the parent or the ref (see example below)
    • group: string, necessary if you want several independent tooltips
    • style: object, allows customizing the tooltip. Checkout the example for details.
    • useHover bool, default to true. If true, the tooltip will stay visible when hovered.

    Parent prop

    You can use an id or a ref to reference the parent:

    id

    <div id="hoverMe" onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
        Hover me!!!
    </div>
    <ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent="#hoverMe">
        <div>
            <p>This is the content of the tooltip</p>
        </div>
    </ToolTip>

    ref

    <div ref={(element) => { this.element = element }} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
        Hover me!!!
    </div>
    <ToolTip active={this.state.isTooltipActive} position="top" arrow="center" parent={this.element}>
        <div>
            <p>This is the content of the tooltip</p>
        </div>
    </ToolTip>

    Stateful ToolTip

    If you only use the Tooltip for mouse enter / mouse leave, you may not want to handle the state yourself for all elements. In this case, you can use the stateful version which will do it for you:

    Import the stateful version:

    import { StatefulToolTip } from "react-portal-tooltip"

    Then create your parent and give it as a prop to the Tooltip:

    const button = <span>Hover me to display the tooltip</span>
     
    return (
      <StatefulToolTip parent={ button }>
        Stateful Tooltip content here!
      </StatefulToolTip>
    )

    StatefulToolTip takes the same props as ToolTip, plus a className prop that will be applied to the root element wrapping the parent (see the example).

    See the example live.

    Development

    # clone 
    $ git clone git@github.com:romainberger/react-portal-tooltip.git
     
    # install the dependencies 
    $ npm install
     
    # go to the example folder, then install more dependencies 
    cd example && npm install
     
    # start the development server with hot reloading 
    $ npm start
     
    # to build run this command from the root directory 
    $ npm build

    License

    MIT

    Install

    npm i react-portal-tooltip

    DownloadsWeekly Downloads

    16,055

    Version

    2.4.7

    License

    MIT

    Unpacked Size

    100 kB

    Total Files

    10

    Last publish

    Collaborators

    • redmega
    • romainberger
    • tanqhnguyen