From df130d20c2812a119c585f8c44e055488b6ae9a8 Mon Sep 17 00:00:00 2001
From: Jim McGaw <jpmcgaw@gmail.com>
Date: Wed, 15 Feb 2023 23:30:25 -0500
Subject: [PATCH] Add tooltips to convey status icon meaning

---
 src/components/chat/UserStatusIcons.js | 28 ++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/UserStatusIcons.js b/src/components/chat/UserStatusIcons.js
index 59e168c..ecd5a72 100644
--- a/src/components/chat/UserStatusIcons.js
+++ b/src/components/chat/UserStatusIcons.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
 import FaCircle from 'react-icons/lib/fa/circle';
 import FaMinusCircle from 'react-icons/lib/fa/minus-circle';
 import FaPencilSquare from 'react-icons/lib/fa/pencil-square';
 
+const activeTooltip = <Tooltip>Active</Tooltip>;
+
+const idleTooltip = <Tooltip>Idle</Tooltip>;
+
 export const UserStatusIcon = ({
   username,
   status,
@@ -13,9 +19,27 @@ export const UserStatusIcon = ({
 }) => {
   let statusIcon = <FaMinusCircle style={styleOffline} />;
   if (status === 'viewing') {
-    statusIcon = <FaCircle style={styleViewing} />;
+    statusIcon = (
+      <OverlayTrigger
+        placement="right"
+        overlay={activeTooltip}
+        trigger="hover"
+        delayShow={300}
+        delayHide={150}>
+        <FaCircle style={styleViewing} />
+      </OverlayTrigger>
+    );
   } else if (status === 'online') {
-    statusIcon = <FaCircle style={styleOnline} />;
+    statusIcon = (
+      <OverlayTrigger
+        placement="right"
+        overlay={idleTooltip}
+        trigger="hover"
+        delayShow={300}
+        delayHide={150}>
+        <FaCircle style={styleOnline} />
+      </OverlayTrigger>
+    );
   }
   return (
     <div style={styleUserStatus}>