simple-react-tooltip
A simple light weight react package to display components as tooltip over other components
Installation
npm i @devbihari/simple-react-tooltip --save
or
yarn add @devbihari/simple-react-tooltip
How to use it
Just wrap your component and pass the tooltip you wish to use
<SimpleReactTooltip tooltip={TooltipComp}>
<Child />
</SimpleReactTooltip>
Example
import React from 'react';
import './App.css';
import SimpleReactTooltip from '@devbihari/simple-react-tooltip';
const Child = () => {
return(
<div className={'child'}>
<p>Hover over me</p>
</div>
)
}
function App() {
const TooltipComp = <div className={'tooltip'}>
<p>I am a tooltip</p>
</div>
return (
<div className="App">
<SimpleReactTooltip tooltip={TooltipComp}>
<Child />
</SimpleReactTooltip>
</div>
);
}
export default App;
Result
Road map
- <input checked="" disabled="" type="checkbox"> Hover to display tooltip
- <input checked="" disabled="" type="checkbox"> Custom design for tooltip
- <input disabled="" type="checkbox"> Delay while showing tooltip
- <input disabled="" type="checkbox"> Optimized for stateful components