easy-react-tooltip

What is Easy React ToolTip?

Get the most easiest ToolTip feature for your React and NPM project.

Preview 👈👈👈

Installation

npm install easy-react-tooltip && import { HoverToolTip, Tooltip } from "easy-react-tooltip";

Show Tooltip on Hover: HoverToolTip with some options props.

<HoverToolTip tip={"My ToolTip"} position={{ top: true }}>
    <button>Top</button>
</HoverToolTip>

Show Tooltip on something else: ToolTip with some options props.

<button
	ref={tooltipPrentRef}
	onClick={() => {
		setShowToolTip(true); //update state (showToolTip) value false => true
	}}>
		Custom ToolTip Click Me
</button>

<Tooltip
	className={"custom-class-name"}
	open={showToolTip}
	parentRef={tooltipPrentRef}
	onHide={() => {
		setShowToolTip(false); //update state (showToolTip) value true => false
	}}
	hideOnClickOutside={false}
	position={{
		top: true, //bottom, left, right
	}}
	delay={0.5} // second
	scrollTarget={window}
	distance={0}>
		<div style={{ color: "red" }}>This is my custom tooltip</div>
</Tooltip>

What are those options (HoverToolTip)???

• children: Tooltip Parent
• tip: The tooltip
• position: Object: {top: true}||{bottom: true}||{left: true}||{right: true}
• className: Your custom classname
• distance: Show tooltip after some offset distance

What are those options (ToolTip)???

• parentRef,
• position,
• open,
• children: The tooltip
• onHide: Callback function when hide the tooltip
• scrollTarget: default: window. If you need to on custom scrollable div.,
• className: Your custom classname
• delay: default: 0 (In second)
• distance: Show tooltip after some offset distance
• hideOnClickOutside: default: true. If want to not hide automatically then value will be false.

Example

import React, { useRef, useState } from "react";
import { HoverToolTip, Tooltip } from "easy-react-tooltip";

const ToolTipTest = () => {
  const tooltipPrentRef = useRef(null);
  const [showToolTip, setShowToolTip] = useState(false);
  return (
    <div style={{ margin: 100, display: "flex", gap: 100, flexWrap: "wrap" }}>

      <HoverToolTip tip={`My ToolTip`} position={{ top: true }}>
        <button>Top</button>
      </HoverToolTip>

      <HoverToolTip tip={`My ToolTip`} position={{ bottom: true }}>
        <button>Bottom</button>
      </HoverToolTip>

      <HoverToolTip tip={`My ToolTip`} position={{ left: true }}>
        <button>Left</button>
      </HoverToolTip>

      <HoverToolTip tip={`My ToolTip`} position={{ right: true }}>
        <button>Right</button>
      </HoverToolTip>

      <HoverToolTip
        tip={`My ToolTip`}
        position={{ top: true }}
        distance={20}
        className="hover-tooltip"
      >
        <button>Distance: 20px & custom class</button>
      </HoverToolTip>

      <button
        ref={tooltipPrentRef}
        onClick={() => {
          setShowToolTip(true);
        }}
      >
        Custom ToolTip Click Me
      </button>
      <Tooltip
        className={"custom-class-name"}
        open={showToolTip}
        parentRef={tooltipPrentRef}
        onHide={() => {
          setShowToolTip(false);
        }}
        hideOnClickOutside={false}
        position={{
          top: true, //bottom, left, right
        }}
        delay={0.5} // second
        scrollTarget={window}
        distance={0}
      >
        <div style={{ color: "red" }}>This is my custom tooltip</div>
      </Tooltip>
    </div>
  );
};

export default ToolTipTest;