diff --git a/platform/wab/src/wab/client/components/widgets/InfoTooltip.tsx b/platform/wab/src/wab/client/components/widgets/InfoTooltip.tsx
new file mode 100644
index 00000000000..8a727b4aa9c
--- /dev/null
+++ b/platform/wab/src/wab/client/components/widgets/InfoTooltip.tsx
@@ -0,0 +1,30 @@
+import { InlineIcon } from "@/wab/client/components/widgets";
+import { Icon } from "@/wab/client/components/widgets/Icon";
+import InfoIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Info";
+import { Popover } from "antd";
+import { isFunction } from "lodash";
+import React, { ReactNode } from "react";
+
+export type InfoTooltipProps = {
+  tooltip: ReactNode | (() => React.ReactNode);
+};
+
+export function InfoTooltip({ tooltip }: InfoTooltipProps) {
+  return (
+    <InlineIcon>
+      <Popover
+        trigger={["hover", "click"]}
+        mouseEnterDelay={0.5}
+        // Place it over dropdown menus (1050), since it can be inside dropdown menus (default is 1030)
+        overlayStyle={{ zIndex: 1080 }}
+        content={() => (
+          <div style={{ maxWidth: 300 }}>
+            {isFunction(tooltip) ? tooltip() : tooltip}
+          </div>
+        )}
+      >
+        <Icon icon={InfoIcon} className="dimfg pointer" />
+      </Popover>
+    </InlineIcon>
+  );
+}
diff --git a/platform/wab/src/wab/client/components/widgets/LabelWithDetailedTooltip.tsx b/platform/wab/src/wab/client/components/widgets/LabelWithDetailedTooltip.tsx
index d1a4f29ce9c..cb104eb9439 100644
--- a/platform/wab/src/wab/client/components/widgets/LabelWithDetailedTooltip.tsx
+++ b/platform/wab/src/wab/client/components/widgets/LabelWithDetailedTooltip.tsx
@@ -1,8 +1,4 @@
-import { InlineIcon } from "@/wab/client/components/widgets";
-import { Icon } from "@/wab/client/components/widgets/Icon";
-import InfoIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Info";
-import { Popover } from "antd";
-import { isFunction } from "lodash";
+import { InfoTooltip } from "@/wab/client/components/widgets/InfoTooltip";
 import React, { ReactNode } from "react";
 
 export function LabelWithDetailedTooltip(props: {
@@ -13,21 +9,7 @@ export function LabelWithDetailedTooltip(props: {
     <div className={"flex flex-vcenter"}>
       {props.children}
       <div className={"ml-xsm inline-block"}>
-        <InlineIcon>
-          <Popover
-            trigger={["hover", "click"]}
-            mouseEnterDelay={0.5}
-            // Place it over dropdown menus (1050), since it can be inside dropdown menus (default is 1030)
-            overlayStyle={{ zIndex: 1080 }}
-            content={() => (
-              <div style={{ maxWidth: 300 }}>
-                {isFunction(props.tooltip) ? props.tooltip() : props.tooltip}
-              </div>
-            )}
-          >
-            <Icon icon={InfoIcon} className="dimfg pointer" />
-          </Popover>
-        </InlineIcon>
+        <InfoTooltip tooltip={props.tooltip} />
       </div>
     </div>
   );