From ab345cf0dac4378163292a5fb99b102bb2922ee1 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Thu, 6 Nov 2025 06:05:08 -0600
Subject: feat(desktop): better tooltips

---
 packages/ui/src/components/icon.tsx    |  1 +
 packages/ui/src/components/tooltip.css | 69 +++++++++++++++++-----------------
 packages/ui/src/components/tooltip.tsx |  8 ++--
 3 files changed, 40 insertions(+), 38 deletions(-)

(limited to 'packages/ui')

diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 617997201..2e96b9d85 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -151,6 +151,7 @@ const newIcons = {
   "square-arrow-top-right": `<path d="M7.91675 2.9165H2.91675V17.0832H17.0834V12.0832M12.0834 2.9165H17.0834V7.9165M9.58342 10.4165L16.6667 3.33317" stroke="currentColor" stroke-linecap="square"/>`,
   "circle-ban-sign": `<path d="M15.3675 4.63087L4.55742 15.441M17.9163 9.9987C17.9163 14.371 14.3719 17.9154 9.99967 17.9154C7.81355 17.9154 5.83438 17.0293 4.40175 15.5966C2.96911 14.164 2.08301 12.1848 2.08301 9.9987C2.08301 5.62644 5.62742 2.08203 9.99967 2.08203C12.1858 2.08203 14.165 2.96813 15.5976 4.40077C17.0302 5.8334 17.9163 7.81257 17.9163 9.9987Z" stroke="currentColor" stroke-linecap="round"/>`,
   stop: `<rect x="6" y="6" width="8" height="8" fill="currentColor"/>`,
+  enter: `<path d="M5.83333 15.8334L2.5 12.5L5.83333 9.16671M3.33333 12.5H17.9167V4.58337H10" stroke="currentColor" stroke-linecap="square"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
diff --git a/packages/ui/src/components/tooltip.css b/packages/ui/src/components/tooltip.css
index 0577365d6..92825aca1 100644
--- a/packages/ui/src/components/tooltip.css
+++ b/packages/ui/src/components/tooltip.css
@@ -6,54 +6,55 @@
 [data-component="tooltip"] {
   z-index: 1000;
   max-width: 320px;
-  border-radius: 12px;
+  border-radius: 6px;
   background-color: var(--surface-float-base);
-  color: var(--white);
-  padding: 2px 12px 2px 12px;
+  color: rgba(253, 252, 252, 0.94);
+  padding: 2px 8px;
+  border: 0.5px solid rgba(253, 252, 252, 0.2);
   box-shadow: var(--shadow-md);
   pointer-events: none !important;
-  transition: all 150ms ease-out;
-  transform: translate3d(0, 0, 0);
-  transform-origin: var(--kb-tooltip-content-transform-origin);
+  /* transition: all 150ms ease-out; */
+  /* transform: translate3d(0, 0, 0); */
+  /* transform-origin: var(--kb-tooltip-content-transform-origin); */
 
-  /* text-14-regular */
+  /* text-12-medium */
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-small);
   font-style: normal;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-large); /* 171.429% */
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large); /* 166.667% */
   letter-spacing: var(--letter-spacing-normal);
 
   &[data-expanded] {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    /* transform: translate3d(0, 0, 0); */
   }
 
   &[data-closed] {
     opacity: 0;
   }
 
-  &[data-placement="top"] {
-    &[data-closed] {
-      transform: translate3d(0, 4px, 0);
-    }
-  }
-
-  &[data-placement="bottom"] {
-    &[data-closed] {
-      transform: translate3d(0, -4px, 0);
-    }
-  }
-
-  &[data-placement="left"] {
-    &[data-closed] {
-      transform: translate3d(4px, 0, 0);
-    }
-  }
-
-  &[data-placement="right"] {
-    &[data-closed] {
-      transform: translate3d(-4px, 0, 0);
-    }
-  }
+  /* &[data-placement="top"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(0, 4px, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="bottom"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(0, -4px, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="left"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(4px, 0, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="right"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(-4px, 0, 0); */
+  /*   } */
+  /* } */
 }
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
index ff13c8d61..c3d1947d3 100644
--- a/packages/ui/src/components/tooltip.tsx
+++ b/packages/ui/src/components/tooltip.tsx
@@ -1,9 +1,9 @@
 import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
-import { children, createEffect, createSignal, splitProps } from "solid-js"
+import { children, createEffect, createSignal, splitProps, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 
 export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
-  value: string | (() => string)
+  value: JSX.Element
   class?: string
 }
 
@@ -29,13 +29,13 @@ export function Tooltip(props: TooltipProps) {
   })
 
   return (
-    <KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen}>
+    <KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen} gutter={4}>
       <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}>
         {c()}
       </KobalteTooltip.Trigger>
       <KobalteTooltip.Portal>
         <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement}>
-          {typeof others.value === "function" ? others.value() : others.value}
+          {others.value}
           {/* <KobalteTooltip.Arrow data-slot="arrow" /> */}
         </KobalteTooltip.Content>
       </KobalteTooltip.Portal>
-- 
cgit v1.2.3