custom tooltip instead of overlayTrigger

Author: Aniket-Engg

apps/learneth/src/components/BackButton/index.tsx

@@ -1,6 +1,7 @@
 import React, {useState} from 'react'
 import {Link, useLocation, useNavigate} from 'react-router-dom'
-import {Button, Modal, Tooltip, OverlayTrigger} from 'react-bootstrap'
+import {Button, Modal } from 'react-bootstrap'
+import { CustomTooltip } from "@remix-ui/helper"
 import './index.scss'
 
 function BackButton({entity}: any) {
@@ -24,18 +25,22 @@ function BackButton({entity}: any) {
             }}
             role="button"
           >
-            <OverlayTrigger placement="right" overlay={<Tooltip id="tooltip-right">Leave tutorial</Tooltip>}>
+            <CustomTooltip
+              placement={"right"}
+              tooltipId="learnethHomeIconTooltip"
+              tooltipText='Leave tutorial'
+            >
               <i className="fas fa-home ps-1" />
-            </OverlayTrigger>
+            </CustomTooltip>
           </div>
         </li>
         {isDetailPage && (
           <li className="nav-item">
-            <OverlayTrigger placement="right" overlay={<Tooltip id="tooltip-rightTutorialMenu">Tutorial menu</Tooltip>}>
+            <CustomTooltip placement="right" tooltipId="learnethBarsIconTooltip" tooltipText='Tutorial menu'>
               <Link className="btn" to={`/list?id=${entity.id}`} onClick={() => (window as any)._paq.push(['trackEvent', 'learneth', 'back_to_menu_step', entity && entity.name])}>
                 <i className="fas fa-bars" />
               </Link>
-            </OverlayTrigger>
+            </CustomTooltip>
           </li>
         )}
       </ul>
@@ -49,7 +54,7 @@ function BackButton({entity}: any) {
           {stepId + 1}/{entity && <div className="">{entity.steps.length}</div>}
           {stepId < entity.steps.length - 1 && (
             <Link to={`/detail?id=${entity.id}&stepId=${stepId + 1}`} onClick={() => (window as any)._paq.push(['trackEvent', 'learneth', 'next_step', `${entity.name}/${nextStep && nextStep.name}`])} >
-              <i className="fas fa-chevron-right ps-1" />
+              <i className="fas fa-chevron-right ps-1 pe-1" />
             </Link>
           )}
         </form>

apps/learneth/src/components/RepoImporter/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { Button, Dropdown, Form, Tooltip, OverlayTrigger } from 'react-bootstrap'
+import { Button, Dropdown, Form } from 'react-bootstrap'
+import { CustomTooltip } from "@remix-ui/helper"
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
 import './index.css'
 
@@ -85,9 +86,9 @@ function RepoImporter({ list, selectedRepo }: any): JSX.Element {
               <Form.Label className="me-2" htmlFor="name">
                 REPO
               </Form.Label>
-              <OverlayTrigger placement="right" overlay={<Tooltip id="tooltip-right">ie username/repository</Tooltip>}>
+              <CustomTooltip placement="right" tooltipId="learnethQuestionIconTooltip" tooltipText='i.e. username/repository'>
                 <i className="fas fa-question-circle" />
-              </OverlayTrigger>
+              </CustomTooltip>
               <Form.Control
                 id="name"
                 required