I simple, configurable, almost-no-opinionated tooltip for React and styled-components.
While working on A my zero-💩 guide of Guatemala I needed a tooltip that was:
- Easy to configure
- Easy to extend
- Using styled-components (so it easy could inherit certain features that is has)
I couldn't find anything so... I made one.
Type in your terminal yarn add react-styled-tooltip
or npm install --save react-styled-tooltip
.
Remember that you need to have styled-components installed.
For the most simple use:
import Tooltip from 'react-styled-tooltip'
const SuperComponent = () => {
return (
<p>I am a super noicy text and <Tooltip content="I will be in the tooltip">I have a tooltip</Tooltip> here</p>
)
}
If you want to use custom content, it uses a render prop for that:
import Tooltip from 'react-styled-tooltip'
const SuperTooltipContent = ({ isVisible }) => (
<div superStyling={isVisible}>
<h4>I'm the tooltip title</h4>
<p>I'm the tooltip description</p>
</div>
)
const SuperComponent = () => {
return (
<p>I am a super noicy text and <Tooltip content={SuperTooltipContent}>I have a tooltip</Tooltip> here</p>
)
}
| Props | Default | | Description |
| --- | --- | --- |
| content | null | It can be a primite or a render function |
| delay | 0 | number
: expressed in seconds of the delay after mouse over/out for the tooltip to appear |
| duration | 0.1 | number
: seconds of the animation duration |