From 4ee6ae929a467f103eb55035da35def47d4f5e66 Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Fri, 13 Dec 2024 09:30:16 -0800
Subject: [PATCH] Unify all tooltip styling

---
 .../src/ui/base/components/LabelValue.tsx     | 30 +++---
 .../src/ui/base/components/MultiStat.tsx      | 98 -------------------
 .../src/ui/base/components/PrimaryStat.tsx    | 18 ++--
 .../src/ui/base/components/Stat.tsx           | 66 -------------
 .../components/Tooltip/TextWithTooltip.tsx    | 24 -----
 .../ui/base/components/Tooltip/Tooltip.tsx    | 37 +++++++
 .../src/ui/base/components/WarningButton.tsx  | 24 -----
 .../shorts/OpenShortForm/OpenShortForm.tsx    | 12 +--
 .../src/ui/markets/AssetStack.tsx             | 17 ++--
 .../src/ui/markets/PoolDetails.tsx            | 19 ++--
 .../src/ui/markets/PoolRow/PoolStat.tsx       | 10 +-
 .../longs/OpenLongsTable/CurrentValueCell.tsx | 30 +++---
 .../LpCurrentValueCell.tsx                    | 37 ++++---
 .../CurrentShortsValueCell.tsx                | 30 +++---
 .../OpenShortsTable/CurrentValueCell.tsx      | 26 +++--
 .../OpenShortsTable/ShortRateAndSizeCell.tsx  | 11 +--
 .../src/ui/token/SlippageSettings.tsx         |  8 +-
 17 files changed, 154 insertions(+), 343 deletions(-)
 delete mode 100644 apps/hyperdrive-trading/src/ui/base/components/MultiStat.tsx
 delete mode 100644 apps/hyperdrive-trading/src/ui/base/components/Stat.tsx
 delete mode 100644 apps/hyperdrive-trading/src/ui/base/components/Tooltip/TextWithTooltip.tsx
 create mode 100644 apps/hyperdrive-trading/src/ui/base/components/Tooltip/Tooltip.tsx
 delete mode 100644 apps/hyperdrive-trading/src/ui/base/components/WarningButton.tsx

diff --git a/apps/hyperdrive-trading/src/ui/base/components/LabelValue.tsx b/apps/hyperdrive-trading/src/ui/base/components/LabelValue.tsx
index 5c9be7f94..3ea22f3bc 100644
--- a/apps/hyperdrive-trading/src/ui/base/components/LabelValue.tsx
+++ b/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>
   );
diff --git a/apps/hyperdrive-trading/src/ui/base/components/MultiStat.tsx b/apps/hyperdrive-trading/src/ui/base/components/MultiStat.tsx
deleted file mode 100644
index 39ce96389..000000000
--- a/apps/hyperdrive-trading/src/ui/base/components/MultiStat.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
-import classNames from "classnames";
-import { ReactElement } from "react";
-import { Stat, StatProps } from "src/ui/base/components/Stat";
-import { useActiveItem } from "src/ui/base/hooks/useActiveItem";
-
-export interface MultiStatProps extends StatProps {
-  id: string;
-}
-
-export function MultiStat({
-  stats,
-  activeStatId,
-  onTabChange,
-}: {
-  stats: MultiStatProps[];
-  onTabChange: (stat: MultiStatProps) => void;
-  activeStatId: string;
-}): ReactElement {
-  const { activeItem, setActiveItemId } = useActiveItem({
-    items: stats,
-    idField: "id",
-    defaultActiveItemId: stats.find((stat) => activeStatId === stat.id)
-      ?.id as string,
-  });
-
-  return (
-    <button
-      className="flex flex-col gap-2"
-      onClick={() => {
-        // if the active item isn't the last one, go to the next item
-        const currentStatIndex = stats.findIndex((i) => i.id === activeItem.id);
-        let nextStat = stats[0];
-        if (currentStatIndex !== stats.length - 1) {
-          nextStat = stats[currentStatIndex + 1];
-        }
-        setActiveItemId(nextStat.id);
-        onTabChange(nextStat);
-      }}
-    >
-      <Stat
-        label={
-          <div className="flex flex-col gap-1">
-            {/* Implements the same label as the Stat component, but adds the
-            tab buttons below the label. This is done so that the tabs can be
-            centered under the label, not the whole Stat element */}
-            {activeItem.description ? (
-              <p
-                data-tip={activeItem.description}
-                className={classNames(
-                  `group daisy-tooltip cursor-help text-start text-sm text-neutral-content before:z-40 before:max-w-56 before:p-2 before:text-start`,
-                  {
-                    "daisy-tooltip-top": activeItem.tooltipPosition === "top",
-                    "daisy-tooltip-bottom":
-                      activeItem.tooltipPosition === "bottom",
-                    "daisy-tooltip-left": activeItem.tooltipPosition === "left",
-                    "daisy-tooltip-right":
-                      activeItem.tooltipPosition === "right",
-                  },
-                )}
-              >
-                {activeItem.label}
-                <InformationCircleIcon className="ml-1 hidden w-4 text-neutral-content opacity-0 transition duration-150 ease-in-out group-hover:text-gray-500 group-hover:opacity-100 lg:inline-block" />
-              </p>
-            ) : (
-              <p className="self-start text-sm text-neutral-content">
-                {activeItem.label}
-              </p>
-            )}
-
-            <div
-              className={classNames("flex items-center justify-center gap-2", {
-                "pr-4": !!activeItem.description,
-              })}
-            >
-              {stats.map(({ id }) => {
-                return (
-                  <div
-                    key={id}
-                    className={classNames(
-                      "transition-all hover:opacity-90",
-                      id === activeItem.id
-                        ? "scale-150 text-base-content"
-                        : "text-neutral-content hover:scale-125",
-                    )}
-                  >
-                    •
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        }
-        value={activeItem.value}
-      />
-    </button>
-  );
-}
diff --git a/apps/hyperdrive-trading/src/ui/base/components/PrimaryStat.tsx b/apps/hyperdrive-trading/src/ui/base/components/PrimaryStat.tsx
index 688f8af37..f1394eb5a 100644
--- a/apps/hyperdrive-trading/src/ui/base/components/PrimaryStat.tsx
+++ b/apps/hyperdrive-trading/src/ui/base/components/PrimaryStat.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}>
diff --git a/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx b/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx
deleted file mode 100644
index acf344aa5..000000000
--- a/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
-import classNames from "classnames";
-import { ReactElement, ReactNode } from "react";
-
-export interface StatProps {
-  label: ReactNode;
-  value: ReactNode;
-  description?: string;
-  size?: "xsmall" | "small" | "large";
-  horizontal?: boolean;
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
-}
-
-export function Stat({
-  label,
-  value,
-  size = "large",
-  description,
-  horizontal,
-  tooltipPosition = "bottom",
-}: StatProps): ReactElement {
-  return (
-    <div
-      className={classNames(
-        "flex w-full items-center whitespace-pre-wrap ease-in-out",
-        {
-          "flex-col": !horizontal,
-          "flex-row-reverse": horizontal,
-          "gap-2": horizontal && label,
-          "gap-0.5": size === "xsmall",
-        },
-      )}
-    >
-      <div
-        className={classNames("whitespace-nowrap font-bold", {
-          "mb-1 text-h5 lg:text-h4": size === "large",
-          "text-sm": size === "small",
-          "text-xs": size === "xsmall",
-        })}
-      >
-        {value}
-      </div>
-      {description ? (
-        <p
-          data-tip={description}
-          className={classNames(
-            `group daisy-tooltip cursor-help text-sm text-neutral-content before:z-40 before:max-w-56 before:p-2 before:text-start`,
-            {
-              "text-sm": ["large", "small"].includes(size),
-              "text-2xs": size === "xsmall",
-              "daisy-tooltip-top": tooltipPosition === "top",
-              "daisy-tooltip-bottom": tooltipPosition === "bottom",
-              "daisy-tooltip-left": tooltipPosition === "left",
-              "daisy-tooltip-right": tooltipPosition === "right",
-            },
-          )}
-        >
-          {label}
-          <InformationCircleIcon className="ml-1 hidden w-4 text-neutral-content opacity-0 transition duration-150 ease-in-out group-hover:text-gray-500 group-hover:opacity-100 lg:inline-block" />
-        </p>
-      ) : (
-        <div className="text-sm text-neutral-content">{label}</div>
-      )}
-    </div>
-  );
-}
diff --git a/apps/hyperdrive-trading/src/ui/base/components/Tooltip/TextWithTooltip.tsx b/apps/hyperdrive-trading/src/ui/base/components/Tooltip/TextWithTooltip.tsx
deleted file mode 100644
index 8e3fd1536..000000000
--- a/apps/hyperdrive-trading/src/ui/base/components/Tooltip/TextWithTooltip.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from "classnames";
-import { ReactElement, ReactNode } from "react";
-
-interface CellWithTooltipProps {
-  label: ReactNode;
-  tooltip: string;
-}
-
-export function TextWithTooltip({
-  label,
-  tooltip,
-}: CellWithTooltipProps): ReactElement {
-  return (
-    <div
-      data-tip={tooltip}
-      // Future note: use before: to style the text inside the tooltip
-      className={classNames(
-        "daisy-tooltip flex items-center transition duration-150 ease-in-out before:whitespace-normal",
-      )}
-    >
-      <p className="text-sm text-neutral-content">{label}</p>
-    </div>
-  );
-}
diff --git a/apps/hyperdrive-trading/src/ui/base/components/Tooltip/Tooltip.tsx b/apps/hyperdrive-trading/src/ui/base/components/Tooltip/Tooltip.tsx
new file mode 100644
index 000000000..814421d7f
--- /dev/null
+++ b/apps/hyperdrive-trading/src/ui/base/components/Tooltip/Tooltip.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>
+  );
+}
diff --git a/apps/hyperdrive-trading/src/ui/base/components/WarningButton.tsx b/apps/hyperdrive-trading/src/ui/base/components/WarningButton.tsx
deleted file mode 100644
index e051df08c..000000000
--- a/apps/hyperdrive-trading/src/ui/base/components/WarningButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-export function WarningButton({
-  label,
-  icon,
-  tooltip,
-}: {
-  label: string;
-  icon: React.ReactNode;
-  tooltip?: string;
-}): JSX.Element {
-  return (
-    <div
-      className="daisy-tooltip daisy-tooltip-left before:z-10"
-      data-tip={tooltip}
-    >
-      <button
-        disabled
-        className="disabled daisy-btn daisy-btn-circle daisy-btn-warning flex w-auto min-w-40 px-4 disabled:bg-warning disabled:text-base-100 disabled:opacity-30"
-      >
-        {icon}
-        {label}
-      </button>
-    </div>
-  );
-}
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
index 5c68079f5..eea11a871 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.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>
diff --git a/apps/hyperdrive-trading/src/ui/markets/AssetStack.tsx b/apps/hyperdrive-trading/src/ui/markets/AssetStack.tsx
index 6b0efb190..0f877829f 100644
--- a/apps/hyperdrive-trading/src/ui/markets/AssetStack.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/AssetStack.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>
   );
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolDetails.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolDetails.tsx
index a5aad0239..457573df1 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolDetails.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolDetails.tsx
@@ -15,6 +15,7 @@ import { ExternalLink } from "src/ui/analytics/ExternalLink";
 import { AccordionSection2 } from "src/ui/base/components/AccordionSection/AccordionSection";
 import CustomBanner from "src/ui/base/components/CustomBanner";
 import { LabelValue } from "src/ui/base/components/LabelValue";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 import { formatAddress } from "src/ui/base/formatting/formatAddress";
 import { useMarketState } from "src/ui/hyperdrive/hooks/useMarketState";
 import { OpenLongForm } from "src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm";
@@ -164,9 +165,10 @@ function AboutThisPool({
                   className="daisy-link"
                   newTab
                 >
-                  <div
-                    className="daisy-tooltip daisy-tooltip-left flex items-center gap-2"
-                    data-tip={baseToken.name}
+                  <Tooltip
+                    position="left"
+                    className="gap-2"
+                    tooltip={baseToken.name}
                   >
                     <img
                       src={baseToken.iconUrl}
@@ -174,7 +176,7 @@ function AboutThisPool({
                     />
                     {formatAddress(baseToken.address)}
                     <ArrowTopRightOnSquareIcon className="-mt-0.5 inline h-4" />
-                  </div>
+                  </Tooltip>
                 </ExternalLink>
               }
             />
@@ -187,9 +189,10 @@ function AboutThisPool({
                     newTab
                     className="daisy-link"
                   >
-                    <div
-                      className="daisy-tooltip daisy-tooltip-left flex items-center gap-2"
-                      data-tip={sharesToken.name}
+                    <Tooltip
+                      position="left"
+                      className="gap-2"
+                      tooltip={sharesToken.name}
                     >
                       <img
                         src={sharesToken.iconUrl}
@@ -197,7 +200,7 @@ function AboutThisPool({
                       />
                       {formatAddress(sharesToken.address)}
                       <ArrowTopRightOnSquareIcon className="-mt-0.5 inline h-4" />
-                    </div>
+                    </Tooltip>
                   </ExternalLink>
                 }
               />
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolStat.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolStat.tsx
index a235191a4..c94936524 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolStat.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolStat.tsx
@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { ReactElement, ReactNode } from "react";
 import Skeleton from "react-loading-skeleton";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 
 export interface PoolStatProps {
   label: string;
@@ -32,14 +33,15 @@ export function PoolStat({
 
   return (
     <div className="flex shrink-0 flex-col items-center gap-1.5 sm:items-start">
-      <p
-        data-tip={labelTooltip}
+      <Tooltip
         className={
-          "group daisy-tooltip cursor-help text-neutral-content before:z-40 before:max-w-56 before:p-2 before:text-start sm:text-sm"
+          "group text-neutral-content before:z-40 before:max-w-56 before:text-start sm:text-sm"
         }
+        tooltip={labelTooltip}
       >
         {label}
-      </p>
+      </Tooltip>
+
       <div
         className={classNames("font-dmMono text-h4 font-medium", {
           "gradient-text": variant === "gradient",
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/CurrentValueCell.tsx b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/CurrentValueCell.tsx
index 0f023131d..a6103b6b8 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/CurrentValueCell.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/CurrentValueCell.tsx
@@ -8,6 +8,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import classNames from "classnames";
 import { ReactElement } from "react";
 import Skeleton from "react-loading-skeleton";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { usePreviewCloseLong } from "src/ui/hyperdrive/longs/hooks/usePreviewCloseLong";
 
@@ -65,34 +66,31 @@ export function CurrentValueCell({
          TODO: Add "Current withdrawabale amount: xxx" to the tooltip once we
          have calcMaxCloseLong */}
         {previewCloseLongError ? (
-          <span
-            className="daisy-tooltip before:z-10 before:border before:font-inter"
-            data-tip="This position cannot be fully closed at this time"
+          <Tooltip
+            className="before:z-10 before:font-inter"
+            tooltip="This position cannot be fully closed at this time"
           >
             <ExclamationTriangleIcon className="size-4 text-warning" />
-          </span>
+          </Tooltip>
         ) : (
           ""
         )}{" "}
         {currentValueLabel}
       </span>
-      <div
-        data-tip={"Profit/Loss since open, after closing fees."}
-        className={classNames(
-          "daisy-tooltip daisy-tooltip-left flex text-xs before:border before:font-inter",
-          {
-            "rounded-md border border-success/20 bg-success/20 px-1 text-success":
-              isPositiveChangeInValue,
-            "rounded-md border border-error/20 bg-error/20 px-1 text-error":
-              !isPositiveChangeInValue && profitLoss !== "-0",
-          },
-        )}
+      <Tooltip
+        tooltip="Profit/Loss since open, after closing fees."
+        className={classNames("text-xs before:font-inter", {
+          "rounded-md border border-success/20 bg-success/20 px-1 text-success":
+            isPositiveChangeInValue,
+          "rounded-md border border-error/20 bg-error/20 px-1 text-error":
+            !isPositiveChangeInValue && profitLoss !== "-0",
+        })}
       >
         <span>{isPositiveChangeInValue ? "+" : ""}</span>
         {baseAmountOut
           ? `${profitLoss === "-0" ? "0" : profitLoss}`
           : undefined}
-      </div>
+      </Tooltip>
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx
index bd9ffe976..2200cd6db 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx
@@ -9,6 +9,7 @@ import { ReactElement } from "react";
 import Skeleton from "react-loading-skeleton";
 import { calculateRatio } from "src/base/calculateRatio";
 import { formatRate } from "src/base/formatRate";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useOpenLpPosition } from "src/ui/hyperdrive/lp/hooks/useOpenLpPosition";
 import { usePreviewRemoveLiquidity } from "src/ui/hyperdrive/lp/hooks/usePreviewRemoveLiquidity";
@@ -89,25 +90,23 @@ export function LpCurrentValueCell({
         <>
           {openLpPositionStatus === "loading" ? (
             <Skeleton className="w-12" />
-          ) : (
-            baseValue && (
-              <div
-                data-tip="Profit/Loss since open, after closing fees. Assuming any outstanding withdrawal shares are redeemed at current price."
-                className={classNames(
-                  "daisy-tooltip daisy-tooltip-left flex text-xs before:border before:font-inter",
-                  {
-                    "rounded-md border border-success/20 bg-success/20 px-1 text-success":
-                      isPositiveChangeInValue,
-                    "rounded-md border border-error/20 bg-error/20 px-1 text-error":
-                      !isPositiveChangeInValue && profitLoss !== "0",
-                  },
-                )}
-              >
-                <span>{isPositiveChangeInValue ? "+" : "-"}</span>
-                {profitLoss === null ? <Skeleton /> : profitLoss.toString()}
-              </div>
-            )
-          )}
+          ) : baseValue ? (
+            <Tooltip
+              tooltip="Profit/Loss since open, after closing fees. Assuming any outstanding withdrawal shares are redeemed at current price."
+              className={classNames(
+                "text-xs before:z-10 before:text-start before:font-inter",
+                {
+                  "rounded-md border border-success/20 bg-success/20 px-1 text-success":
+                    isPositiveChangeInValue,
+                  "rounded-md border border-error/20 bg-error/20 px-1 text-error":
+                    !isPositiveChangeInValue && profitLoss !== "0",
+                },
+              )}
+            >
+              <span>{isPositiveChangeInValue ? "+" : "-"}</span>
+              {profitLoss === null ? <Skeleton /> : profitLoss.toString()}
+            </Tooltip>
+          ) : null}
         </>
       </span>
       <span className="text-neutral-content">
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/CurrentShortsValueCell.tsx b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/CurrentShortsValueCell.tsx
index 58965d608..aeeb4e45e 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/CurrentShortsValueCell.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/CurrentShortsValueCell.tsx
@@ -8,6 +8,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/16/solid";
 import classNames from "classnames";
 import { ReactElement } from "react";
 import Skeleton from "react-loading-skeleton";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useIsTailwindSmallScreen } from "src/ui/base/mediaBreakpoints";
 import { useEstimateShortMarketValue } from "src/ui/hyperdrive/shorts/hooks/useEstimateShortMarketValue";
@@ -79,32 +80,29 @@ export function CurrentShortsValueCell({
     <div className={"flex items-center gap-2"}>
       <span className="flex items-center gap-2 text-md">
         {previewCloseShortError ? (
-          <span
-            className="daisy-tooltip before:z-10 before:border before:font-inter"
-            data-tip="This position cannot be fully closed at this time"
+          <Tooltip
+            className="before:z-10 before:text-start before:font-inter"
+            tooltip="This position cannot be fully closed at this time"
           >
             <ExclamationTriangleIcon className="size-4 text-warning" />
-          </span>
+          </Tooltip>
         ) : (
           ""
         )}{" "}
         {currentValueLabel}
       </span>
-      <div
-        data-tip={"Profit/Loss since open, after closing fees."}
-        className={classNames(
-          "daisy-tooltip daisy-tooltip-left flex text-xs before:border before:font-inter",
-          {
-            "rounded-md border border-success/20 bg-success/20 px-1 text-success":
-              isPositiveChangeInValue,
-            "rounded-md border border-error/20 bg-error/20 px-1 text-error":
-              !isPositiveChangeInValue && profitLoss !== "-0",
-          },
-        )}
+      <Tooltip
+        tooltip={"Profit/Loss since open, after closing fees."}
+        className={classNames("text-xs before:z-10 before:font-inter", {
+          "rounded-md border border-success/20 bg-success/20 px-1 text-success":
+            isPositiveChangeInValue,
+          "rounded-md border border-error/20 bg-error/20 px-1 text-error":
+            !isPositiveChangeInValue && profitLoss !== "-0",
+        })}
       >
         <span>{isPositiveChangeInValue ? "+" : ""}</span>
         {profitLoss}
-      </div>
+      </Tooltip>
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/CurrentValueCell.tsx b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/CurrentValueCell.tsx
index 42b44f1c1..3f3f22efc 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/CurrentValueCell.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/CurrentValueCell.tsx
@@ -8,6 +8,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import classNames from "classnames";
 import { ReactElement } from "react";
 import Skeleton from "react-loading-skeleton";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useIsTailwindSmallScreen } from "src/ui/base/mediaBreakpoints";
 import { useEstimateShortMarketValue } from "src/ui/hyperdrive/shorts/hooks/useEstimateShortMarketValue";
@@ -80,12 +81,12 @@ export function CurrentValueCell({
          TODO: Add "Current withdrawabale amount: xxx" to the tooltip once we
          have calcMaxCloseShort */}
         {previewCloseShortError ? (
-          <span
-            className="daisy-tooltip before:font-normal"
-            data-tip="This position cannot be fully closed at this time"
+          <Tooltip
+            className="before:text-start before:font-normal"
+            tooltip="This position cannot be fully closeat this time "
           >
             <ExclamationTriangleIcon className="size-4 text-warning" />
-          </span>
+          </Tooltip>
         ) : (
           ""
         )}{" "}
@@ -94,22 +95,19 @@ export function CurrentValueCell({
 
       {/* the current value of the user's position */}
       {currentValueInBase && openShort.bondAmount !== 0n ? (
-        <div
-          data-tip={"Profit/Loss since open, after closing fees."}
-          className={classNames(
-            "daisy-tooltip daisy-tooltip-left mt-1 flex text-xs before:border",
-            {
-              "text-success": isPositiveChangeInValue,
-              "text-error": !isPositiveChangeInValue && profitLoss !== "-0",
-            },
-          )}
+        <Tooltip
+          tooltip={"Profit/Loss since open, after closing fees."}
+          className={classNames("mt-1 flex text-xs", {
+            "text-success": isPositiveChangeInValue,
+            "text-error": !isPositiveChangeInValue && profitLoss !== "-0",
+          })}
         >
           {/* the Profit/Loss badge indicator */}
           <span>{isPositiveChangeInValue ? "+" : ""}</span>
           {profitLoss
             ? `${profitLoss === "-0" ? "" : `${profitLoss} ${baseToken.symbol}`}`
             : undefined}
-        </div>
+        </Tooltip>
       ) : (
         ""
       )}
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ShortRateAndSizeCell.tsx b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ShortRateAndSizeCell.tsx
index 80b471254..ee7dff9d8 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ShortRateAndSizeCell.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ShortRateAndSizeCell.tsx
@@ -7,6 +7,7 @@ import { OpenShort } from "@delvtech/hyperdrive-js";
 import classNames from "classnames";
 import { ReactElement } from "react";
 import { formatRate } from "src/base/formatRate";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useFixedRate } from "src/ui/hyperdrive/longs/hooks/useFixedRate";
 import { useBlock } from "wagmi";
@@ -43,12 +44,10 @@ export function ShortRateAndSizeCell({
     <div className="flex flex-col">
       <div className="flex items-center gap-2 text-md">
         <p>{`${formatRate({ rate: short.fixedRatePaid })} APR`}</p>
-        <div
-          data-tip={
-            "The difference between the fixed rate you shorted and the current fixed rate."
-          }
+        <Tooltip
+          tooltip="The difference between the fixed rate you shorted and the current fixed rate."
           className={classNames(
-            "daisy-tooltip daisy-tooltip-left flex text-xs before:border before:font-inter",
+            "z-10 text-xs before:text-start before:font-inter",
             {
               "rounded-md border border-success/20 bg-success/20 px-1 text-success":
                 isPositiveChangeInValue,
@@ -59,7 +58,7 @@ export function ShortRateAndSizeCell({
         >
           <span>{isPositiveChangeInValue ? "+" : ""}</span>
           {formatRate({ rate: rateDifference })}
-        </div>
+        </Tooltip>
       </div>
       <p className="text-neutral-content">{`${formatBalance({
         balance: short.bondAmount,
diff --git a/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx b/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx
index a0497bc68..11ca73334 100644
--- a/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx
+++ b/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx
@@ -5,6 +5,7 @@ import {
 import classNames from "classnames";
 import { ReactElement, useState } from "react";
 import { PercentInput } from "src/ui/base/components/PercentInput";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 
 export const DEFAULT_SLIPPAGE_AMOUNT = "0.5";
 
@@ -45,12 +46,9 @@ export function SlippageSettings({
         <div className="daisy-menu daisy-dropdown-content absolute right-0 z-[1] min-w-64 justify-evenly rounded-lg border bg-base-100 p-4 shadow">
           <div className="flex items-center">
             <span className="ml-1">Max. Slippage</span>
-            <div
-              className="daisy-tooltip ml-1 before:w-48 before:border before:text-xs"
-              data-tip={tooltip}
-            >
+            <Tooltip className="ml-1 before:text-start" tooltip={tooltip}>
               <InformationCircleIcon className="size-4" />
-            </div>
+            </Tooltip>
           </div>
           <div className="flex flex-row items-center justify-between">
             <div className="daisy-tabs daisy-tabs-xs my-4">