From 7f2c0b346c2101c4f94d75cb476c5011d2e22f71 Mon Sep 17 00:00:00 2001
From: Daniil Palagin <daniilpalaginjob@gmail.com>
Date: Mon, 4 Nov 2024 12:56:28 +0100
Subject: [PATCH] [#227] Fix overlay position render

---
 src/components/HelpIcon.jsx | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/HelpIcon.jsx b/src/components/HelpIcon.jsx
index dcc1b08b..8d17e78e 100644
--- a/src/components/HelpIcon.jsx
+++ b/src/components/HelpIcon.jsx
@@ -1,14 +1,22 @@
 "use strict";
 
-import React from "react";
-import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import React, { useRef, useState } from "react";
+import { Overlay, Tooltip } from "react-bootstrap";
 import PropTypes from "prop-types";
-import { FaEnvelope, FaQuestionCircle } from "react-icons/fa";
-import { FaCheck } from "react-icons/fa";
-import { FaTimes } from "react-icons/fa";
-import { FaTasks } from "react-icons/fa";
+import { FaEnvelope, FaQuestionCircle, FaCheck, FaTimes, FaTasks } from "react-icons/fa";
 
 const HelpIcon = (props) => {
+  const [show, setShow] = useState(false);
+  const target = useRef(null);
+
+  const handleMouseEnter = () => {
+    setShow(true);
+  };
+
+  const handleMouseLeave = () => {
+    setShow(false);
+  };
+
   const tooltip = <Tooltip id="help-tooltip">{props.text}</Tooltip>;
 
   const icon = () => {
@@ -27,9 +35,14 @@ const HelpIcon = (props) => {
   };
 
   return (
-    <OverlayTrigger placement="right" overlay={tooltip}>
-      {icon()}
-    </OverlayTrigger>
+    <>
+      <span ref={target} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className="position-relative">
+        {icon()}
+      </span>
+      <Overlay target={target.current} show={show} placement="right" onHide={handleMouseLeave}>
+        {tooltip}
+      </Overlay>
+    </>
   );
 };