Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-tooltip-controller
Advanced tools
react-tooltip-controller - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
| { | ||
| "name": "react-tooltip-controller", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "description": "A feature-rich React component for controlling tooltips", | ||
@@ -5,0 +5,0 @@ "author": "Dogacan Bilgili", |
260
README.md
@@ -1,31 +0,265 @@ | ||
| # react-tooltip-controller | ||
| # React-Tooltip-Controller | ||
| > A feature-rich React component for controlling tooltips | ||
| This is a feature-rich React component for controlling tooltips. Not only for tooltips, but you can use it for various interaction requirements. | ||
| [](https://www.npmjs.com/package/react-tooltip-controller) [](https://standardjs.com) | ||
| Visit the [examples page](https://dbilgili.github.io/React-Tooltip-Controller/) to discover all the functionalities. | ||
| ## Install | ||
| ```bash | ||
| npm install --save react-tooltip-controller | ||
| | Basic Tooltip | Animated Tooltip | Advanced Tooltip | | ||
| |---|---|---| | ||
| |  |  |  | | ||
| #### Highlights | ||
| - Supports `click`, `hover`, `hover-hold` and `hover-interactable` detection. | ||
| - You can individually animate each tooltip. | ||
| - You can set whether the tooltip closes when clicked on it. | ||
| - You can assign a variable to close the tooltip manually. | ||
| - You can retrieve the state of the tooltip (whether open or not). | ||
| - You can set a timeout to automatically close the tooltip. | ||
| - You can position the tooltip relative to the triggering element. | ||
| - You can automatically center the tooltip along the X axis for dynamically sized elements. | ||
| ## Installing | ||
| `npm install react-tooltip-controller` | ||
| After installing the module, import it: | ||
| ```javascript | ||
| import ToolTipController from 'react-tooltip-controller' | ||
| ``` | ||
| ## Usage | ||
| ## Basic Usage | ||
| ```jsx | ||
| ```html | ||
| <button className="random-classname">Click me</button> | ||
| <ToolTipController | ||
| select="random-classname" | ||
| detect="click" | ||
| offsetY={20}> | ||
| <TooltipComponent/> | ||
| </ToolTipController> | ||
| ``` | ||
| Anything 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 referring to the `className` property of the `<button>`, `<TooltipComponent/>` is attached to `<button>` and set to be triggered by a `click` action. | ||
| 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 | E.g. `"1"`, `"2"` | null | String | | ||
| | select | `className` of the element that will control the tooltip | - | - | String | | ||
| | detect | Determines how to trigger the tooltip. Note that `timeOut` and `id` props should be defined in order to use the `"hover-interactable”` option | `"click"`,<br/>`"hover"`,<br/>`"hover-hold"`,<br/>`"hover-interactable”` | `"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"` along with `width` prop, automatically aligns to middle of the triggering element | positive/negative integers or `"center"` | 0 | Integer, String | | ||
| | width | Width value of the __tooltip__<br/>Required for `offsetX = "center"` | positive integers | null | Integer | | ||
| | 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 | | ||
| ## Examples | ||
| ### Minimal Example | ||
| ```javascript | ||
| import React, { Component } from 'react' | ||
| import ToolTipController from 'react-tooltip-controller' | ||
| import './styles/main.css' | ||
| import MyComponent from 'react-tooltip-controller' | ||
| const ToolTip = () => | ||
| <div className="toolTip"> | ||
| Tooltip | ||
| </div> | ||
| class Example extends Component { | ||
| render () { | ||
| render() { | ||
| return ( | ||
| <MyComponent /> | ||
| <div className="App"> | ||
| <button className="btn">Hello There</button> | ||
| <ToolTipController | ||
| select="btn" | ||
| detect="hover"> | ||
| <ToolTip/> | ||
| </ToolTipController> | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
| export default Example | ||
| ``` | ||
| ## License | ||
| ### Animation Example | ||
| MIT © [dbilgili](https://github.com/dbilgili) | ||
| __Stylus File__ | ||
| ```css | ||
| .react-tooltip-1 | ||
| opacity: 0 | ||
| transform: translateY(10px) | ||
| &.fadeIn | ||
| opacity: 1 | ||
| transform: translateY(0) | ||
| ``` | ||
| __JSX file__ | ||
| ```javascript | ||
| import React, { Component } from 'react' | ||
| import ToolTipController from 'react-tooltip-controller' | ||
| import './styles/main.css' | ||
| const ToolTip = () => | ||
| <div className="toolTip"> | ||
| Tooltip | ||
| </div> | ||
| class Example extends Component { | ||
| render() { | ||
| return ( | ||
| <div className="App"> | ||
| <button className="btn">Hello There</button> | ||
| <ToolTipController | ||
| id="1" | ||
| select="btn" | ||
| detect="hover" | ||
| animation="fadeIn" | ||
| duration=".3s" | ||
| timing="ease" | ||
| properties={["opacity", "transform"]}> | ||
| <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"`, we refer to this tooltip 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 is prominent when you resize the browser window as the tooltip is open._ | ||
| ### Use of `triggerClose` prop | ||
| ```javascript | ||
| import React, { Component } from 'react' | ||
| import ToolTipController from 'react-tooltip-controller' | ||
| import './styles/main.css' | ||
| 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"> | ||
| <button className="btn">Hello There</button> | ||
| <ToolTipController | ||
| select="btn" | ||
| detect="click" | ||
| closeOnClick={false} | ||
| triggerClose={this.state.trigger}> | ||
| <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 actions 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 | ||
| ```javascript | ||
| import React, { Component } from 'react' | ||
| import ToolTipController from 'react-tooltip-controller' | ||
| import './styles/main.css' | ||
| 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"> | ||
| <button className="btn">Hello There</button> | ||
| <ToolTipController | ||
| select="btn" | ||
| detect="hover" | ||
| returnState={this.getTooltipState}> | ||
| <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 |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.53%
285027
- Number of lines in readme file
- increased by731.25%
266
No dependency changes