A lightweight React.js tooltip component
npm install react-lightweight-tooltip



js
npm install react-lightweight-tooltip --save
`
Basic Usage
$3
`js
import {Tooltip} from 'react-lightweight-tooltip';
`
$3
`js
Simple black tooltip
`
Advanced Usage
$3
#### children
The children represent the element(s) the tooltip is wrapped around.
#### content
The content is the actual content of the tooltip.
It can be string or array of React Elements.
Note that each React Element in the array has to have its unique key prop.
`js
content={
[
'This repo is hosted on ',
Github,
]
}>
Tooltip with a link
`
#### styles
The styles prop is used to override the default styles of the tooltip.
When passed to the component, the component merges them with its default styles.
This is especaially handy when writing specialized components.
`js
const greenRoundedStyle = {
content: {
backgroundColor: 'green',
color: '#000',
},
tooltip: {
backgroundColor: 'green',
borderRadius: '10px',
},
arrow: {
borderTop: 'solid green 5px',
},
};
const GreenRoundedTooltip = () => {
return (
content={
[
'This repo is hosted on ',
Github,
]
}
styles={greenRoundedStyle}>
Green tooltip with rounded corners and a link
);
}
export default GreenRoundedTooltip;
`
$3
You can easily override the default styles by passing your own styles to the styles prop.
When your styles get passed, the component merges them with its default styles.
The default styles are the following:
`js
{
wrapper: {
position: 'relative',
display: 'inline-block',
zIndex: '98',
color: '#555',
cursor: 'help',
},
tooltip: {
position: 'absolute',
zIndex: '99',
background: '#000',
bottom: '100%',
left: '50%',
marginBottom: '10px',
padding: '5px',
WebkitTransform: 'translateX(-50%)',
msTransform: 'translateX(-50%)',
OTransform: 'translateX(-50%)',
transform: 'translateX(-50%)',
},
content: {
background: '#000',
color: '#fff',
fontSize: '.8em',
padding: '.3em 1em',
whiteSpace: 'nowrap',
},
arrow: {
position: 'absolute',
width: '0',
height: '0',
bottom: '-5px',
left: '50%',
marginLeft: '-5px',
borderLeft: 'solid transparent 5px',
borderRight: 'solid transparent 5px',
borderTop: 'solid #000 5px',
},
gap: {
position: 'absolute',
width: '100%',
height: '20px',
bottom: '-20px',
},
}
``