base-hover-comp.js

 <div className="hovs-banner" id="hovs-banner">
  {state &&
    state.nodes &&
    state.nodes.map((x, i) => {
      return (
        <div key={i} className="hovs-main">
          <div
            id={"hovs-main-scroll-comp-" + i.toString()}
            onMouseEnter={() => handleMouseEnter(i)}
          >
            {x}
          </div>
          <div
            className="hovs-hoverComp"
            id={`hovs-data-hover-node-${i}`}
          >
            {state.hover_nodes[i]}
          </div>
        </div>
      );
    })}
</div>

function.js

const handleMouseEnter = (index) => {
    const ele = document.getElementById(
      "hovs-main-scroll-comp-" + index.toString()
    );

    const ban_div = document.getElementById("hovs-banner");

    const view_ele = document.getElementById("hovs-data-hover-node-" + index);

    if (view_ele && ele && ban_div) {
      view_ele.style.top = ele.offsetTop + state.hover_pos_y + "px";
      view_ele.style.left =
        ele.offsetLeft - ban_div.scrollLeft + state.hover_pos_x + "px";
    }
  };

  const handleLeft = () => {
    const bandiv = document.getElementById("hovs-banner");
    bandiv?.scrollBy({
      left: -1 * state.scroll_by,
    });
  };

styles.css

// **--- Important BEGIN ---**
.hovs-hoverComp {
  display: none;
}

.hovs-main:hover > .hovs-hoverComp {
  display: block;
  position: absolute;
}

// **--- Important END ---**