#153 - Replace CSS tooltips with shadcn tooltip in sidebar and respon…

…se status to add consistent delay and improve tooltip behavior
EXXETA · Jan 18, 2025 · 4a9c957 · 4a9c957
1 parent 0605c42
commit 4a9c957
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 30 deletions.
diff --git a/src/renderer/components/mainWindow/responseStatus/ResponseStatus.tsx b/src/renderer/components/mainWindow/responseStatus/ResponseStatus.tsx
@@ -6,6 +6,7 @@ import {
 } from '@/components/mainWindow/responseStatus/ResponseStatusFormatter';
 import { selectResponse, useResponseStore } from '@/state/responseStore';
 import { selectRequest, useRequestStore } from '@/state/requestStore';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 export function ResponseStatus() {
   const requestId = useRequestStore((state) => selectRequest(state)?.id);
@@ -25,13 +26,19 @@ export function ResponseStatus() {
     <span className="response-status text-nowrap ml-auto truncate">
       <span className={'text-sm  ' + statusColorClass}>{statusText}</span>
       <span className="ml-2 text-sm">{durationText}</span>
-      <span className="ml-2 text-sm tooltip">
-        {sizeText}
-        <div className="tooltip-text flex flex-col items-start">
-          <span>Headers: {getSizeText(metaInfo.size.headersSizeInBytes)}</span>
-          <span>Body: {getSizeText(metaInfo.size.bodySizeInBytes)}</span>
-        </div>
-      </span>
+      <TooltipProvider>
+        <Tooltip delayDuration={750}>
+          <TooltipTrigger asChild>
+            <span className="ml-2 text-sm">{sizeText}</span>
+          </TooltipTrigger>
+          <TooltipContent>
+            <div className="flex flex-col items-start">
+              <span>Headers: {getSizeText(metaInfo.size.headersSizeInBytes)}</span>
+              <span>Body: {getSizeText(metaInfo.size.bodySizeInBytes)}</span>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </span>
   );
 }
diff --git a/src/renderer/components/sidebar/SidebarRequestList/index.tsx b/src/renderer/components/sidebar/SidebarRequestList/index.tsx
@@ -6,6 +6,7 @@ import { useRequestActions, useRequestStore } from '@/state/requestStore';
 import { handleMouseEvent } from '@/util/callback-util';
 import './index.css';
 import { RequestContextMenu } from '@/components/sidebar/SidebarRequestList/ContextMenu/RequestContextMenu';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 export const SidebarRequestList = () => {
   const { setSelectedRequest } = useRequestActions();
@@ -52,10 +53,16 @@ export const SidebarRequestList = () => {
           <div className={joinClassNames('font-bold', httpMethodColor(request.method))}>
             {request.method}
           </div>
-          <div className="truncate tooltip flex-1">
-            {request.url}
-            <div className="tooltip-text">{request.url}</div>
-          </div>
+          <TooltipProvider>
+            <Tooltip delayDuration={750}>
+              <TooltipTrigger asChild>
+                <div className="truncate flex-1">{request.url}</div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{request.url}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
           <div className="items-center justify-center flex">
             <RequestContextMenu index={index} />
           </div>

diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css
@@ -50,25 +50,6 @@
 .response-status {
 }
 
-/* Tooltip */
-.tooltip .tooltip-text {
-  font-size: small;
-  visibility: hidden;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 0.25rem 0.5rem;
-
-  /* Position the tooltip */
-  position: fixed;
-  z-index: 1;
-}
-
-.tooltip:hover .tooltip-text {
-  visibility: visible;
-}
-
 body {
   font-family: "Lato", sans-serif;
   color: #EEEEEE;