show the status beacon tooltip in the right place

PagerDuty · Jun 30, 2023 · 05e6fc1 · 05e6fc1
1 parent 6955f74
commit 05e6fc1
Showing 1 changed file with 17 additions and 20 deletions.
diff --git a/src/components/NavigationBar/StatusBeaconComponent.js b/src/components/NavigationBar/StatusBeaconComponent.js
@@ -3,8 +3,8 @@ import {
 } from 'react-redux';
 
 import {
-  OverlayTrigger, Tooltip,
-} from 'react-bootstrap';
+  Tooltip,
+} from '@chakra-ui/react';
 
 import i18next from 'i18n';
 
@@ -18,25 +18,22 @@ const StatusBeaconComponent = ({
 
   const queueStatsStr = `${waiting} ${i18next.t('waiting')}, ${running} ${i18next.t('running')}`;
   return (
-    <div className="status-beacon-ctr">
-      <OverlayTrigger
-        placement="bottom"
-        // eslint-disable-next-line
-        overlay={(
-          <Tooltip className="status-beacon-connection">
-            <>
-              {i18next.t('Status')}
-              :
-              {connectionStatusMessage}
-              <br />
-              {queueStatsStr}
-            </>
-          </Tooltip>
-        )}
-      >
+
+    <Tooltip
+      label={(
+        <>
+          {i18next.t('Status')}
+          :
+          {connectionStatusMessage}
+          <br />
+          {queueStatsStr}
+        </>
+      )}
+    >
+      <div className="status-beacon-ctr">
         <Beacon status={connectionStatus} speed="normal" size="1.2em" />
-      </OverlayTrigger>
-    </div>
+      </div>
+    </Tooltip>
   );
 };