❤
npm
Sign UpSign In

react-tooltip-controller

1.0.6 • Public • Published

React-Tooltip-Controller

This is a feature-rich React component for controlling tooltips. Not only for tooltips, but you can use it for various interaction requirements.

It seamlessly integrates into your markup without breaking it.

Visit the examples page to discover the functionalities.

Basic Tooltip Animated Tooltip Advanced Tooltip
screen7 screen8 screen6

Highlights

  • Supports click, hover, hover-hold and hover-interact detections.
  • Each tooltip can be animated individually.
  • Set whether the tooltip closes when clicked on it.
  • Close the tooltip manually by assigning a variable.
  • Retrieve the state of the tooltip (whether open or not).
  • Set a timeout to automatically close the tooltip.
  • Position the tooltip relative to the triggering element.
  • Automatically center the tooltip along the X axis for dynamically sized elements.

Installing

npm install react-tooltip-controller

After installing the module, import the following components:

import {ToolTipController, Select} from 'react-tooltip-controller'

Basic Usage

<ToolTipController
  detect="click"
  offsetY="center"
  offsetY={20}>
 
  // Selects the element controlling the tooltip
  <Select>
    <button>Click me</button>
  </Select>
 
  // Custom tooltip component
  <TooltipComponent/>
 
</ToolTipController>

Anything, but <Select> component, wrapped by <ToolTipController> is portalled to the bottom of the <body> tag in the DOM.

You can either wrap a component or JSX Markup with <ToolTipController>.

By wrapping the <button> with <Select> component, <TooltipComponent/> is attached to <button> and set to be triggered by a click event.

By default, the tooltip wrapped is positioned relative to the left-bottom of the selected element.

Properties Table

Props Description Possible Values Default Data Type
id Assigns an ID number to the tooltip container class to be able to distinguish between multiple tooltips. Required for CSS animations on tooltip E.g. "1", "2" null String
detect Determines how to trigger the tooltip. Note that timeOut prop should be defined in order to use the "hover-interact” option "click",
"hover",
"hover-hold",
"hover-interact”		 "click" String
closeOnClick Determines whether the tooltip closes when clicked on it true, false true Boolean
triggerClose A Boolean value of true closes the tooltip manually Boolean variable - Boolean
returnState Returns the state of the tooltip - If it’s open or not Function - Function
timeOut Determines if the tooltip closes automatically after a certain amount of time in milliseconds positive integers null Integer
offsetX Determines the offset along the X axis relative to left bottom of the element positive/negative integers 0 Integer
offsetY Determines the offset along the Y axis relative to left bottom of the element. If set to "center", automatically aligns to middle of the triggering element positive/negative integers or "center" 0 Integer, String
animation Determines the name of the animation class - null String
duration Determines the duration of the animation in units of milliseconds(ms) or seconds(s) E.g. "500ms" or "0.5s" null String
timing Determines the timing function of the animation. You can use standard CSS timing functions such as "linear", "ease" or can define a specific Cubic Bezier curve E.g. "linear" or "ease" null String
properties Determines the properties to be animated. Can be a string or an array of strings E.g. "all" or ["opacity", "transform"] [ ] String, Array

Note: Hover events act as a click event on touch devices.

Examples

Minimal Example

import React, { Component } from 'react'
import {ToolTipController, Select} from 'react-tooltip-controller'
 
const ToolTip = () =>
  <div className="toolTip">
    Tooltip
  </div>
 
class Example extends Component {
 
  render() {
    return (
      <div className="App">
 
        <ToolTipController
          detect="hover">
 
          <Select>
            <button>Hello There</button>
          </Select>
 
          <ToolTip/>
 
        </ToolTipController>
 
      </div>
 
    )
  }
}
 
export default Example
 

Animation Example

Stylus File

.react-tooltip-1
  opacity: 0
  transform: translateY(10px)
  &.fadeIn
    opacity: 1
    transform: translateY(0)

JSX file

import React, { Component } from 'react'
import {ToolTipController, Select} from 'react-tooltip-controller'
import './styles/animation.css'
 
const ToolTip = () =>
  <div className="toolTip">
    Tooltip
  </div>
 
class Example extends Component {
 
  render() {
    return (
      <div className="App">
 
        <ToolTipController
          id="1"
          detect="hover"
          animation="fadeIn"
          duration=".3s"
          timing="ease"
          properties={["opacity", "transform"]}>
 
          <Select>
            <button>Hello There</button>
          </Select>
 
          <ToolTip/>
 
        </ToolTipController>
 
      </div>
 
    )
  }
}
 
export default Example

Note that react-tooltip is a built-in class name and since the id prop is set to "1", it is referred with the specific class name of react-tooltip-1.

Always set the id prop for the animated tooltips in order to prevent any class name conflicts.

Side note: If you don't set the properties prop, all the properties for the tooltip animates. This results in position animations when the browser is resized.

Use of triggerClose prop

import React, { Component } from 'react'
import {ToolTipController, Select} from 'react-tooltip-controller'
 
const ToolTip = (props) =>
  <div className="toolTip">
    Tooltip
    <button onClick={null}></button>
    <button onClick={props.closeTriggerFunction}></button>
  </div>
 
class Example extends Component {
 
  state = {
    trigger: false
  }
 
  close = () => {
    this.setState({trigger: true})
  }
 
  render() {
    return (
      <div className="App">
 
        <ToolTipController
          detect="click"
          closeOnClick={false}
          triggerClose={this.state.trigger}>
 
          <Select>
            <button>Hello There</button>
          </Select>
 
          <ToolTip closeTriggerFunction={this.close}/>
 
        </ToolTipController>
 
      </div>
 
    )
  }
}
 
export default Example

By using the triggerClose prop, the tooltip can be closed manually. To do so, variable passed to triggerClose prop should be set to true.

This example demonstrates how to close the tooltip by setting the state of the triggering variable to true. To prevent the other click events on the tooltip from closing it, closeOnClick is set to false. Note that clicking outside of the tooltip closes it independent of the triggerClose prop.

Use of returnState prop

import React, { Component } from 'react'
import {ToolTipController, Select} from 'react-tooltip-controller'
 
const ToolTip = (props) =>
  <div className="toolTip">
    Tooltip
  </div>
 
class Example extends Component {
 
  state = {
    tooltipState: false
  }
 
  getTooltipState = (data) => {
    this.setState({tooltipState: data})
  }
 
  render() {
    return (
      <div className="App">
 
        <ToolTipController
          select="btn"
          detect="hover"
          returnState={this.getTooltipState}>
 
          <Select>
            <button>Hello There</button>
          </Select>
 
          <ToolTip/>
 
        </ToolTipController>
 
      </div>
 
    )
  }
}
 
export default Example

You can pass a function as a prop through returnState in order to get the state of the tooltip, whether it's open or not.

License

MIT License

Readme

Keywords

Package Sidebar

Install

npm i react-tooltip-controller

Repository

github.com/dbilgili/react-tooltip-controller

Homepage

github.com/dbilgili/react-tooltip-controller#readme

Weekly Downloads

8

Version

1.0.6

License

MIT

Unpacked Size

216 kB

Total Files

6

Last publish

Collaborators

  • dbilgili
Try on RunKit
Report malware