react-portal-tooltip-upgraded
v2.4.8
Awesome React tooltips
0/weekUpdated 2 years agoMITUnpacked: 62.6 KB
Published by Romain Berger
npm install react-portal-tooltip-upgradedReact Portal Tooltip React V18
Awesome tooltips.
 
Installation
``shell`
$ npm install react-portal-tooltip-react-v18
`
Documentation and demo
http://romainberger.github.io/react-portal-tooltip/
Usage
`javascript
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 (
This is a cool component
This is the content of the tooltip
)
}
}
`
$3
*
: 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.$3
You can use an id or a ref to reference the parent:
#### id
`javascript
Hover me!!!
This is the content of the tooltip
`#### ref
javascript
{ this.element = element }} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
Hover me!!!
This is the content of the tooltip
`$3
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:
js
import { StatefulToolTip } from "react-portal-tooltip"
`Then create your parent and give it as a prop to the Tooltip:
js
const button = Hover me to display the tooltipreturn (
Stateful Tooltip content here!
)
` takes the same props as ToolTip, plus a className prop that will be applied to the root element wrapping the parent (see the example).Development
`shellinstall the dependencies
$ npm installgo to the example folder, then install more dependencies
$ cd example && npm installstart the development server with hot reloading
$ npm startto build run this command from the root directory
$ npm build
``License
MIT