Unify all tooltip styling (#1683)

Author: DannyDelott

apps/hyperdrive-trading/src/ui/base/components/LabelValue.tsx

@@ -1,6 +1,7 @@
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
 import classNames from "classnames";
 import { ReactNode } from "react";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 
 export function LabelValue({
   size = "medium",
@@ -29,25 +30,20 @@ export function LabelValue({
         "text-sm": size === "small",
       })}
     >
-      <div
-        className={classNames(
-          "flex items-center text-neutral-content before:bg-base-100",
-          {
-            "group daisy-tooltip cursor-help": tooltipContent,
-            "daisy-tooltip-top": tooltipPosition === "top",
-            "daisy-tooltip-bottom": tooltipPosition === "bottom",
-            "daisy-tooltip-left": tooltipPosition === "left",
-            "daisy-tooltip-right": tooltipPosition === "right",
+      {tooltipContent ? (
+        <Tooltip
+          position={tooltipPosition}
+          className={classNames("group text-left text-neutral-content", {
             "before:w-64": tooltipSize === "small",
-          },
-        )}
-        data-tip={tooltipContent}
-      >
-        {label}
-        {tooltipContent ? (
+          })}
+          tooltip={tooltipContent}
+        >
+          {label}
           <InformationCircleIcon className="ml-1.5 w-5 opacity-50 transition duration-150 ease-in-out group-hover:opacity-100 lg:inline-block" />
-        ) : null}
-      </div>
+        </Tooltip>
+      ) : (
+        <div className="text-neutral-content">{label}</div>
+      )}
       <div>{value}</div>
     </div>
   );

apps/hyperdrive-trading/src/ui/base/components/MultiStat.tsx

@@ -2,6 +2,7 @@ import { InformationCircleIcon } from "@heroicons/react/24/outline";
 import classNames from "classnames";
 import { ReactNode } from "react";
 import Skeleton from "react-loading-skeleton";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 
 export function PrimaryStat({
   label,
@@ -36,20 +37,13 @@ export function PrimaryStat({
       <div className="flex gap-1">
         <p className="max-w-40 text-sm text-neutral-content">{label}</p>
         {tooltipContent && (
-          <div
-            className={classNames(
-              "daisy-tooltip daisy-tooltip-top before:border",
-              {
-                "daisy-tooltip-top": tooltipPosition === "top",
-                "daisy-tooltip-bottom": tooltipPosition === "bottom",
-                "daisy-tooltip-left": tooltipPosition === "left",
-                "daisy-tooltip-right": tooltipPosition === "right",
-              },
-            )}
-            data-tip={tooltipContent}
+          <Tooltip
+            position={tooltipPosition}
+            tooltip={tooltipContent}
+            className="before:text-left"
           >
             <InformationCircleIcon className="size-4 text-neutral-content" />
-          </div>
+          </Tooltip>
         )}
       </div>
       <div className={valueContainerClassName}>

apps/hyperdrive-trading/src/ui/base/components/PrimaryStat.tsx

@@ -0,0 +1,37 @@
+import classNames from "classnames";
+import { PropsWithChildren, ReactElement } from "react";
+
+interface CellWithTooltipProps extends PropsWithChildren {
+  className?: string;
+  tooltip?: string;
+  position?: "top" | "bottom" | "left" | "right";
+}
+
+export function Tooltip({
+  children,
+  className,
+  tooltip,
+  position = "top",
+}: CellWithTooltipProps): ReactElement {
+  if (!tooltip) {
+    return <div className={className}>{children}</div>;
+  }
+  return (
+    <div
+      data-tip={tooltip}
+      // Future note: use before: to style the text inside the tooltip
+      className={classNames(
+        "daisy-tooltip flex cursor-help items-center transition duration-150 ease-in-out before:whitespace-normal before:border before:border-gray-900 before:bg-gray-700 before:px-3 before:py-2 before:shadow-2xl",
+        {
+          "daisy-tooltip-top": position === "top",
+          "daisy-tooltip-bottom": position === "bottom",
+          "daisy-tooltip-left": position === "left",
+          "daisy-tooltip-right": position === "right",
+        },
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

apps/hyperdrive-trading/src/ui/base/components/Stat.tsx

@@ -19,6 +19,7 @@ import { getHasEnoughAllowance } from "src/token/getHasEnoughAllowance";
 import { getHasEnoughBalance } from "src/token/getHasEnoughBalance";
 import { LoadingButton } from "src/ui/base/components/LoadingButton";
 import { PrimaryStat } from "src/ui/base/components/PrimaryStat";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { formatDate } from "src/ui/base/formatting/formatDate";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
@@ -495,15 +496,14 @@ export function OpenShortForm({
             }
             unitClassName="mb-1 font-bold"
             subValue={
-              <div
-                data-tip={
-                  "Short positions provide the fixed rate to Long positions. Opening a Short is a one-time cost."
-                }
-                className="daisy-tooltip daisy-tooltip-top flex cursor-help items-center gap-1 before:border"
+              <Tooltip
+                position="top"
+                tooltip="Short positions provide the fixed rate to Long positions. Opening a Short is a one-time cost."
+                className="gap-1 before:text-left"
               >
                 What am I paying for?{" "}
                 <InformationCircleIcon className="size-4 text-neutral-content" />
-              </div>
+              </Tooltip>
             }
           />
         </div>

apps/hyperdrive-trading/src/ui/base/components/Tooltip/TextWithTooltip.tsx

@@ -5,6 +5,7 @@ import {
   getToken,
 } from "@delvtech/hyperdrive-appconfig";
 import { ReactElement } from "react";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 import { Address } from "viem";
 
 export function AssetStack({
@@ -37,20 +38,20 @@ export function AssetStack({
       }
     >
       {hyperdrive.depositOptions.isBaseTokenDepositEnabled ? (
-        <div
-          className="daisy-avatar daisy-tooltip daisy-tooltip-top w-12 overflow-visible bg-[#ffffff] before:bg-base-100"
-          data-tip={baseToken.symbol}
+        <Tooltip
+          className="daisy-avatar w-12 overflow-visible bg-[#ffffff]"
+          tooltip={baseToken.symbol}
         >
           <img src={baseToken.iconUrl} className="rounded-full" />
-        </div>
+        </Tooltip>
       ) : null}
       {sharesToken && hyperdrive.depositOptions.isShareTokenDepositsEnabled ? (
-        <div
-          className="daisy-avatar daisy-tooltip daisy-tooltip-top w-12 overflow-visible before:bg-base-100"
-          data-tip={sharesToken.symbol}
+        <Tooltip
+          className="daisy-avatar w-12 overflow-visible bg-[#ffffff]"
+          tooltip={sharesToken.symbol}
         >
           <img src={sharesToken.iconUrl} className="rounded-full bg-base-100" />
-        </div>
+        </Tooltip>
       ) : null}
     </div>
   );