A graphical user interface element that will render when the user hovers or clicks an item.
A graphical user interface element that will render when the user hovers over (optional) or clicks an item, a tooltip may appear with information about said item.
npm install --save react-png-tooltip
shouldDisableClick
and shouldDisableHover
props respectively to the tooltip.Props | Functionality |
---|---|
shouldDisableHover |
Disables hovering functionality, the tooltips will only render upon clicking the tooltip. |
shouldDisableClick |
Disables clicking functionality, the tooltips will only render upon hovering the tooltip. If passed as true, then the tooltip's cancel button will not be rendered. |
tooltip |
Your custom JSX button that will toggle the tooltip window, must be JSX. |
fill |
The fill prop will change the default icon question-mark color, e.g. '#484848' or 'red' (must be a string). |
background |
The background prop will change the default icon background color, e.g. '#0000FF' or 'blue' (must be a string). |
wrapperClassName |
You may change the wrapper CSS class if you don't like the default one (display: inline-table; position: 'relative' ), the wrapper is the outer div that wraps the whole tooltip (content and icon). Make sure you set position relative if you decide to change the wrapperClassName, or else the positioning may be problematic. |
className |
You can use your own desired CSS class for the tooltip window by passing said class as a prop, pass them with the !important tag to overwrite the default ones, however, it is highly advised to only modify background-color, color, fill, border-colors, etc (aesthetics). Modifying width nor any similar properties is not recommended as of now. Usage examples below. |
import React, { Component } from 'react'
import Tooltip from 'react-png-tooltip'
const component = () => {
return (
<Tooltip>
The tooltip will accept any type of children.
</Tooltip>
)
}
.IndianredTooltip {
background-color: #cd5c5c;
color: #FFF;
fill: #FFF;
}
import React, { Component } from 'react'
// CSS
import classes from './yourcss.css'
// JSX
import Tooltip from 'react-png-tooltip'
const component = () => {
return (
<Tooltip background='indianred' className='IndianredTooltip'>
The tooltip will accept any type of children.
</Tooltip>
)
}
import React, { Component } from 'react'
// CSS
import classes from './yourcss.css'
// JSX
import Tooltip from 'react-png-tooltip'
const component = () => {
return (
<Tooltip background='indianred' className={classes.IndianredTooltip}>
The tooltip will accept any type of children.
</Tooltip>
)
}
import React, { Component } from 'react'
// CSS
import classes from './yourcss.css'
// JSX
import Tooltip from 'react-png-tooltip'
const component = () => {
return (
<Tooltip className='OrangeTooltip' tooltip={<button className='CustomButton'>Your custom button!</button>}>
And it still works as you'd expect! The tooltip's content would go inside.
</Tooltip>
)
}
MIT © rmolinamir