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={{
    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 | This prop takes styles which can be passed as an object. Ex : stylingOptions = {width:"200px",fontSize:"10px"} | | 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 prop is set to true, then the tooltip will close only if the user clicks on the child element of 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. | | ShowArrow | boolean | To show the tooltip arrow, this prop muse be set to true. By default, it is false. | | classNames | array | This prop takes an array of strings. Custom classNames can be given to the tooltip. Ex : ["custom-class1","custom-class2"] |

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

Custom styles can be passed to the tooltip using the stylingOptions prop:

stylingOptions={{
backgroundColor: "#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={{
          color: "#000",
          width: "115px",
          height:"100px"
          zIndex: 100,
          }}
          content="Bottom Tooltip">
          <button>Bottom</button>
      </HoverText>
    </>
  );
};