React Portal Tooltip

Awesome tooltips.

 

!react tooltip

Installation

``shell
$ npm install react-portal-tooltip
`

Warning The versions 2.x on npm are compatible with React 16. Corresponding versions for older versions of React:

`shell


For react v15

`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

* active: 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


`javascript


`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 tooltip

return (

Stateful Tooltip content here!

)
`

StatefulToolTip takes the same props as ToolTip, plus a className prop that will be applied to the root element wrapping the parent (see the example).

See the example live.

Development

`shell


clone

License

MIT