[#227] Replace boostrap tooltip by react tooltip.

package.json

@@ -31,6 +31,7 @@
     "react-promise-tracker": "^2.1.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
+    "react-tooltip": "^5.28.0",
     "redux": "^4.1.0",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.3.0",

src/components/HelpIcon.jsx

@@ -1,35 +1,34 @@
-"use strict";
-
 import React from "react";
-import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import { Tooltip } from "react-tooltip";
 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 tooltip = <Tooltip id="help-tooltip">{props.text}</Tooltip>;
-
   const icon = () => {
     switch (props.glyph) {
       case "ok":
-        return <FaCheck className={"ok-icon " + props.className} />;
+        return <FaCheck className={`ok-icon ${props.className}`} />;
       case "remove":
-        return <FaTimes className={"remove-icon " + props.className} />;
+        return <FaTimes className={`remove-icon ${props.className}`} />;
       case "to-do":
-        return <FaTasks className={"to-do-icon " + props.className} />;
+        return <FaTasks className={`to-do-icon ${props.className}`} />;
       case "envelope":
-        return <FaEnvelope className={"publish-icon " + props.className} />;
+        return <FaEnvelope className={`publish-icon ${props.className}`} />;
       default:
-        return <FaQuestionCircle className={"help-icon " + props.className} />;
+        return <FaQuestionCircle className={`help-icon ${props.className}`} />;
     }
   };
 
   return (
-    <OverlayTrigger placement="right" overlay={tooltip}>
-      {icon()}
-    </OverlayTrigger>
+    <>
+      <a className={`tooltip-${props.glyph}`} data-tooltip-id={`tooltip-${props.glyph}`} aria-label={props.text}>
+        {icon()}
+      </a>
+
+      <Tooltip id={`tooltip-${props.glyph}`} place="right">
+        {props.text}
+      </Tooltip>
+    </>
   );
 };