react-mouse-tooltip

React Mouse Tooltip

React Mouse Tooltip is a react component that shows a tooltip that follows the user's mouse cursor. It supports different positions, colors, animations and custom content inside the tooltip.

Installation

You can install React Mouse Tooltip using npm:

npm i react-mouse-tooltip

Usage

To use React Mouse Tooltip you need to import it into your project:

import React from 'react';
import Tooltip from 'react-mouse-tooltip';

function App() {
  return (
    <div>
      <Tooltip content="Tooltip content">
        <h1>Hello Tooltip!</h1>
      </Tooltip>
    </div>
  );
}

export default App;

Configuration

You can customize the appearance and behavior of the tooltip by passing different props to the <Tooltip /> component. Here is a list of available props and their default values:

Prop	Type	Default	Description
content	ReactNode / string	-	Required prop. The custom content that will be displayed inside the tooltip. Can be any valid react element.
transform	string	translate(0,25px)	CSS transform property. The position of the tooltip relative to the mouse cursor.
className	string	''
wrapperDivProps	Record<string, any>	undefined	These props will be added to wrapper div element.
any other props	...rest	undefined	Any other props will be added to tooltip div element

License

MIT

Free Software, Hell Yeah!