react-hover-text v1.0.8

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

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>
    </>
  );
};