React Hover Text

A all-in-one library for all kind of tooltip

Features

• Customize the tooltip using props and place the tooltip on Top,Bottom,Left and Right.
• Auto detection of the space available and opens itself in the opposite direction
• Change the background color,text color,width,height using props.
• Trigger the tooltip on either click or on hover.
• Add HTML as content for the tooltip.

Usage

import HoverText from "react-hover-text";
//props used by Tooltip
<HoverText
  placement="top" // Pass this prop to define where the tooltip needs to be placed
  content="Hello World" // The content that needs to be shown on the tooltip
  stylingOptions={{
    bgColor: "#fff",
    color: "#000",
    width: "150px",
  }}
  parentClass="parent-element" // pass this prop if the tooltip should be positioned according to parent
/>;

Props

Parameter	Type	Description
placement	string	Required. This Prop specifies where the tooltip needs to be placed. Accepted Values include top,left,bottom,right. Ex: placement="top"
content	string or HTML	Required. This Prop specifies the text that needs to appear on the tooltip. Ex: content="hello world". Note: For adding Html elements as the content, set the html prop to true.
trigger	string	By default the tooltip will open on hover.If the trigger is set to "click", then the tooltip will open on click
stylingOptions	object	The styling options like bgColor,color,width,height can be passed as object for this prop
html	boolean	This prop must be set to true, if the content for the tooltip should be HTML
scrollElement	string	Pass the classname of the element on which overflow:scroll property is applied. This prop will be needed if tooltip is added inside an element that will scroll
hideOnClick	boolean	If this value is set to true, then the tooltip will close only if the user clicks on the tooltip directly. By default, the tooltip will close,if it is clicked anywhere.
parentClass	string	If the tooltip needs to be positioned according to the parent element, specify the className of the parent element.

Important

If the tooltip is added inside an element that will scroll, the below function needs to be called from the utils file along with the parameters. This function must be called inside the function that handles the scrolling for the element.

import { tooltipScroll } from "react-hover-text/dist/utils";
tooltipScroll(targetElementClass, scrollParentElementClass, scrollElementClass);

/**
 * tooltipScroll
 * @param {string} targetElementClass - This class is the target element, that makes the tooltip visible.
 * @param {string} scrollParentElementClass - This class is the parent of the scrolling element.
 * @param {string} scrollElementClass - This class is the element on which the overflow:scroll property is applied.
 */

Example (Scrolling tooltip)

// Example given below
handleScroll(){
  tooltipScroll(".table-row-tooltip .btn-download", ".home-table", ".asc-custom-table-wrapper");
}

Styling Options

The styling Options supported on the tooltip are as follows : width, height, zIndex, bgColor, color. The prop need to be passed as follows in the below given format :

stylingOptions={{
bgColor: "#fff",
color: "#000",
width: "115px",
height:"100px"
zIndex: 100,
}}

Example

import HoverText from "react-hover-text";

export const App = () => {
  return (
    <>
      <HoverText placement="top" content="Top Tooltip">
        <button>Top</button>
      </HoverText>

      <HoverText
        placement="bottom"
        stylingOptions={{
          bgColor: "#fff",
          color: "#000",
          width: "115px",
          height:"100px"
          zIndex: 100,
          }}
          content="Bottom Tooltip">
          <button>Bottom</button>
      </HoverText>
    </>
  );
};