ui/tooltip: refactor tooltip

pkgs/clan-app/ui/src/components/Form/Label.tsx

@@ -55,23 +55,14 @@ export const Label = (props: LabelProps) => {
             <Tooltip
               placement="top"
               inverted={props.inverted}
-              trigger={
-                <Icon
-                  icon="Info"
-                  color="tertiary"
-                  inverted={props.inverted}
-                  size={props.size == "default" ? "0.85em" : "0.75rem"}
-                />
-              }
+              description={props.tooltip}
             >
-              <Typography
-                hierarchy="body"
-                size="xs"
-                weight="medium"
-                inverted={!props.inverted}
-              >
-                {props.tooltip}
-              </Typography>
+              <Icon
+                icon="Info"
+                color="tertiary"
+                inverted={props.inverted}
+                size={props.size == "default" ? "0.85em" : "0.75rem"}
+              />
             </Tooltip>
           )}
         </props.labelComponent>

pkgs/clan-app/ui/src/components/Tooltip/Tooltip.module.css

@@ -1,4 +1,4 @@
-div.tooltip-content {
+.tooltipContent {
   @apply z-50 px-2 py-0.5 bg-inv-4 rounded-[0.125rem] leading-none;
 
   max-width: min(calc(100vw - 16px), 380px);

pkgs/clan-app/ui/src/components/Tooltip/Tooltip.tsx

@@ -1,31 +1,40 @@
-import "./Tooltip.css";
 import {
   Tooltip as KTooltip,
   TooltipRootProps as KTooltipRootProps,
 } from "@kobalte/core/tooltip";
 import cx from "classnames";
 import { JSX } from "solid-js";
+import styles from "./Tooltip.module.css";
+import { Typography } from "../Typography/Typography";
 
 export interface TooltipProps extends KTooltipRootProps {
   inverted?: boolean;
-  trigger: JSX.Element;
   children: JSX.Element;
+  description: JSX.Element;
   animation?: "bounce";
 }
 
 export const Tooltip = (props: TooltipProps) => {
   return (
     <KTooltip {...props}>
-      <KTooltip.Trigger>{props.trigger}</KTooltip.Trigger>
+      <KTooltip.Trigger>{props.children}</KTooltip.Trigger>
       <KTooltip.Portal>
         <KTooltip.Content
-          class={cx("tooltip-content", {
-            inverted: props.inverted,
+          class={cx(styles.tooltipContent, {
+            [styles.inverted]: props.inverted,
             "animate-bounce": props.animation == "bounce",
           })}
         >
           {props.placement == "bottom" && <KTooltip.Arrow />}
-          {props.children}
+          <Typography
+            hierarchy="body"
+            size="s"
+            weight="medium"
+            color="primary"
+            inverted={!props.inverted}
+          >
+            {props.description}
+          </Typography>
           {props.placement == "top" && <KTooltip.Arrow />}
         </KTooltip.Content>
       </KTooltip.Portal>