Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/slmgc/react-hint
Tooltip component for React, Preact, Inferno
https://github.com/slmgc/react-hint
component inferno preact react react-component tooltip
Last synced: 4 days ago
JSON representation
Tooltip component for React, Preact, Inferno
- Host: GitHub
- URL: https://github.com/slmgc/react-hint
- Owner: slmgc
- License: mit
- Created: 2016-09-18T16:57:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-04T19:10:04.000Z (almost 4 years ago)
- Last Synced: 2025-01-22T14:05:04.834Z (11 days ago)
- Topics: component, inferno, preact, react, react-component, tooltip
- Language: JavaScript
- Homepage: https://react-hint.js.org/
- Size: 243 KB
- Stars: 335
- Watchers: 5
- Forks: 28
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
React-hint
==========
[![npm package][npm-badge]][npm] [![npm package][npm-downloads]][npm]
**React-hint** is a small tooltip component for [React](https://github.com/facebook/react) which is developed with simplicity and performance in mind. It also plays nicely with [Preact](https://github.com/developit/preact) and [Inferno](https://github.com/trueadm/inferno).
How to install
--------------
```
npm i -S react-hint
```
How to import
-------------
```jsx
// React
import React from 'react'
import ReactHintFactory from 'react-hint'
const ReactHint = ReactHintFactory(React)
// Preact
import {h, Component, createRef} from 'preact'
import ReactHintFactory from 'react-hint'
const ReactHint = ReactHintFactory({createElement: h, Component, createRef})
// Inferno
import Inferno from 'inferno-compat'
import ReactHintFactory from 'react-hint'
const ReactHint = ReactHintFactory(Inferno)
// UMD
const ReactHint = window.ReactHintFactory(window.React)
```
You don't need to include ReactHint in every component which uses tooltips, just include it once in the topmost container component.
Use
---
ReactHint is (in 99% of cases) a singleton-component which is used to render tooltips which appear on multiple elements :
```jsx
Hover me 1 !
Hover me 2 !
Hover me 3 !
Hover me 4 !
```
The text content which appears inside the tooltip is set by `data-rh` attribute.
Tooltip will appear on hover on every element with `data-rh` attribute.
*Note : tooltip can also be toggled by calling `toggleHint()` on the ref of a the component:*
```jsx
{ this.tooltip = ref; }} />
Element with tooltip
{ this.tooltip.toggleHint(); }}>Click me to toggle React Hint on element !
```
### custom content
In case you need to define custom content (HTML), you must use the `onRenderContent` prop of ReactHint:
```jsx
(
`tooltip ${target.number}`
)}
/>
Hover me 1 !
Hover me 2 !
Hover me 3 !
Hover me 4 !
```
Use `data-abcdef` attribute on component which uses tooltip to pass data which can be accessed via `target.abcdef` in `onRenderContent()`.
*ReactHint is not your regular wrapping tooltip component library, e.g. this is **incorrect**:*
```jsx
Content of the tooltip
```
### multiple instances
In case you need to define multiple instances of `ReactHint` (ex to show tooltips with different content layout), you can customize the attribute name per instance.
ReactHint also supports custom tooltip content with attached event handlers by overriding the content renderer and returning a react node.
```jsx
// default tooltip
// custom tooltip 1
(
`tooltip ${target.number}`
)}
/>
// custom tooltip 2
(
`tooltip ${target.title}`
)}
/>
Hover me 1 to show default tooltip !
Hover me 2 to show default tooltip !
Hover me to show custom tooltip 1 !
Hover me to show custom tooltip 1 !
Hover me to show custom tooltip 2 !
Hover me to show custom tooltip 2 !
```
*Note : when using custom attribute name, data should be passed prefixed with attribute name as shown above.*
Options
-------
| ReactHint Property | Type | Default Value | Description
| :----------------- | :---------------------------------------------------------- | :------------ | :----------
| attribute | String | "data-rh" | Allows setting a custom tooltip attribute instead of the default one.
| autoPosition | Boolean | false | Autopositions tooltips based on closeness to window borders.
| className | String | "react-hint" | You can override the tooltip style by passing the `className` property.
| delay | Number or {show: Number, hide: Number} | 0 | The default delay (in milliseconds) before showing/hiding the tooltip.
| events | Boolean or {click: Boolean, focus: Boolean, hover: Boolean} | false | Enables/disables all events or a subset of events.
| onRenderContent | Function | | Allows rendering of custom HTML content (with attached event handlers). Pass a function which returns a react node.
| persist | Boolean | false | Hide the tooltip only on outside click, hover, etc.
| position | "top", "left", "right", "bottom" | "top" | Allows setting the default tooltip placement.
| ref | Function | | You can pass a function which will get a reference to the tooltip instance.
| DOM Element Attribute | Type | Default Value | Description
| :-------------------- | :------------------------------- | :------------ | :----------
| data-rh | String | | Sets the tooltip's text content (if `onRenderContent` is not used to set custom HTML content).
| data-rh-at | "top", "left", "right", "bottom" | "top" | Allows overriding the default tooltip placement.
Full Example
------------
```jsx
import React from 'react'
import {render} from 'react-dom'
import ReactHintFactory from 'react-hint'
import 'react-hint/css/index.css'
const ReactHint = ReactHintFactory(React)
class App extends React.Component {
onRenderContent = (target, content) => {
const {catId} = target.dataset
const width = 240
const url = `https://images.pexels.com/photos/${catId}/pexels-photo-${catId}.jpeg?w=${width}`
return
ref && ref.focus()}
onClick={() => this.instance.toggleHint()}>Ok
}
render() {
return
this.instance = ref} />
Default
Top
Right
Bottom
Left
Click Me
Click Me
}
}
render(, demo)
```
License
-------
MIT
[npm-badge]: https://img.shields.io/npm/v/react-hint.png
[npm-downloads]: https://img.shields.io/npm/dm/react-hint.svg
[npm]: https://www.npmjs.org/package/react-hint