Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dbilgili/react-tooltip-controller
This is a feature-rich React component for controlling tooltips / pop-up menus
https://github.com/dbilgili/react-tooltip-controller
animated-tooltips reactjs tooltips
Last synced: 7 days ago
JSON representation
This is a feature-rich React component for controlling tooltips / pop-up menus
- Host: GitHub
- URL: https://github.com/dbilgili/react-tooltip-controller
- Owner: dbilgili
- License: mit
- Created: 2018-12-04T21:14:04.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-22T01:59:25.000Z (almost 6 years ago)
- Last Synced: 2024-10-14T06:21:22.496Z (about 1 month ago)
- Topics: animated-tooltips, reactjs, tooltips
- Language: JavaScript
- Homepage:
- Size: 575 KB
- Stars: 26
- Watchers: 1
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://dbilgili.github.io/React-Tooltip-Controller/) to discover the functionalities.
| Basic Tooltip | Animated Tooltip | Advanced Tooltip |
|---|---|---|
|  |  |  |
#### 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:
```javascript
import {ToolTipController, Select} from 'react-tooltip-controller'
```
## Basic Usage
```html
// Selects the element controlling the tooltip
Click me
// Custom tooltip component
```
Anything, but `` component, wrapped by `` is portalled to the bottom of the `` tag in the DOM.
You can either wrap a component or JSX Markup with ``.
By wrapping the `` with `` component, `` is attached to `` 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
```javascript
import React, { Component } from 'react'
import {ToolTipController, Select} from 'react-tooltip-controller'
const ToolTip = () =>
Tooltip
class Example extends Component {
render() {
return (
Hello There
)
}
}
export default Example
```
### Animation Example
__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, Select} from 'react-tooltip-controller'
import './styles/animation.css'
const ToolTip = () =>
Tooltip
class Example extends Component {
render() {
return (
Hello There
)
}
}
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
```javascript
import React, { Component } from 'react'
import {ToolTipController, Select} from 'react-tooltip-controller'
const ToolTip = (props) =>
Tooltip
class Example extends Component {
state = {
trigger: false
}
close = () => {
this.setState({trigger: true})
}
render() {
return (
Hello There
)
}
}
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
```javascript
import React, { Component } from 'react'
import {ToolTipController, Select} from 'react-tooltip-controller'
const ToolTip = (props) =>
Tooltip
class Example extends Component {
state = {
tooltipState: false
}
getTooltipState = (data) => {
this.setState({tooltipState: data})
}
render() {
return (
Hello There
)
}
}
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