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

• [x] Hover to display tooltip
• [x] Custom design for tooltip
• [ ] Delay while showing tooltip
• [ ] Optimized for stateful components