Added tooltip for list items

kloudlite · Mar 7, 2024 · 7504052 · 7504052
1 parent f3f1245
commit 7504052
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 28 deletions.
diff --git a/src/apps/console/components/console-list-components.tsx b/src/apps/console/components/console-list-components.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, forwardRef } from 'react';
 import Tooltip from '~/components/atoms/tooltip';
 import { cn } from '~/components/utils';
 
@@ -72,16 +72,37 @@ const ListItem = ({
   return (
     <div className={cn(BaseStyle, className)}>
       <div className="flex flex-col flex-1 truncate">
-        {data && (
-          <div className="flex-1 bodyMd-medium text-text-strong truncate pulsable">
-            {data}
-          </div>
-        )}
-        {subtitle && (
-          <div className="pulsable bodyMd text-text-soft truncate">
-            {subtitle}
+        <Tooltip.Root
+          className="!w-fit !max-w-fit"
+          side="top"
+          content={
+            <div className="flex flex-col flex-1 truncate">
+              {data && (
+                <div className="flex-1 bodyMd-medium text-text-strong truncate pulsable">
+                  {data}
+                </div>
+              )}
+              {subtitle && (
+                <div className="pulsable bodyMd text-text-soft truncate">
+                  {subtitle}
+                </div>
+              )}
+            </div>
+          }
+        >
+          <div className="flex flex-col gap-sm truncate max-w-full w-fit">
+            {data && (
+              <div className="flex-1 bodyMd-medium text-text-strong truncate pulsable">
+                {data}
+              </div>
+            )}
+            {subtitle && (
+              <div className="pulsable bodyMd text-text-soft truncate">
+                {subtitle}
+              </div>
+            )}
           </div>
-        )}
+        </Tooltip.Root>
       </div>
       {action}
     </div>
@@ -106,23 +127,39 @@ const ListTitle = ({
       <div className="flex flex-row items-center gap-xl flex-1 truncate">
         {avatar}
         <div className="flex flex-col gap-sm flex-1 truncate">
-          {title && (
-            <div className="bodyMd-semibold text-text-default truncate pulsable">
-              <Tooltip.Root
-                className="!w-fit !max-w-fit"
-                side="top"
-                content={<div className="bodySm text-text-strong">{title}</div>}
-              >
-                <span className="w-fit">{title}</span>
-              </Tooltip.Root>
-            </div>
-          )}
+          <Tooltip.Root
+            className="!w-fit !max-w-fit"
+            side="top"
+            content={
+              <div className="flex flex-col gap-sm w-fit truncate">
+                {title && (
+                  <div className="bodyMd-semibold text-text-default truncate pulsable">
+                    <span className="w-fit">{title}</span>
+                  </div>
+                )}
 
-          {subtitle && (
-            <div className="bodySm text-text-soft truncate pulsable">
-              {subtitle}
+                {subtitle && (
+                  <div className="bodySm text-text-soft truncate pulsable">
+                    {subtitle}
+                  </div>
+                )}
+              </div>
+            }
+          >
+            <div className="flex flex-col gap-sm truncate max-w-full w-fit">
+              {title && (
+                <div className="bodyMd-semibold text-text-default pulsable truncate">
+                  <span>{title}</span>
+                </div>
+              )}
+
+              {subtitle && (
+                <div className="bodySm text-text-soft truncate pulsable">
+                  {subtitle}
+                </div>
+              )}
             </div>
-          )}
+          </Tooltip.Root>
         </div>
       </div>
       {action}

diff --git a/src/apps/console/routes/_main+/$account+/projects/project-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/projects/project-resources-v2.tsx
@@ -3,11 +3,8 @@ import { Link, useOutletContext, useParams } from '@remix-run/react';
 import { generateKey, titleCase } from '~/components/utils';
 import ConsoleAvatar from '~/console/components/console-avatar';
 import {
-  ListBody,
   ListItem,
   ListTitle,
-  listClass,
-  listFlex,
 } from '~/console/components/console-list-components';
 import Grid from '~/console/components/grid';
 import ListGridView from '~/console/components/list-grid-view';