diff --git a/skyvern-frontend/src/components/HelpTooltip.tsx b/skyvern-frontend/src/components/HelpTooltip.tsx
new file mode 100644
index 00000000..ab2f17d6
--- /dev/null
+++ b/skyvern-frontend/src/components/HelpTooltip.tsx
@@ -0,0 +1,26 @@
+import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "./ui/tooltip";
+
+type Props = {
+ content: string;
+};
+
+function HelpTooltip({ content }: Props) {
+ return (
+
+
+
+
+
+ {content}
+
+
+ );
+}
+
+export { HelpTooltip };
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
index 2f3dfdc0..c30ea97b 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/TaskNode/TaskNode.tsx
@@ -1,4 +1,5 @@
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
+import { HelpTooltip } from "@/components/HelpTooltip";
import {
Accordion,
AccordionContent,
@@ -28,7 +29,11 @@ import { EditableNodeTitle } from "../components/EditableNodeTitle";
import { NodeActionMenu } from "../NodeActionMenu";
import { TaskNodeDisplayModeSwitch } from "./TaskNodeDisplayModeSwitch";
import { TaskNodeParametersPanel } from "./TaskNodeParametersPanel";
-import type { TaskNode, TaskNodeDisplayMode } from "./types";
+import {
+ helpTooltipContent,
+ type TaskNode,
+ type TaskNodeDisplayMode,
+} from "./types";
import { useParams } from "react-router-dom";
function getLocalStorageKey(workflowPermanentId: string, label: string) {
@@ -124,12 +129,16 @@ function TaskNode({ id, data }: NodeProps) {
const advancedContent = (
<>
-
+
- Content
+
+
+
Content
+
+
+
+
+
@@ -173,7 +182,14 @@ function TaskNode({ id, data }: NodeProps) {
- Extraction
+
+
+
Extraction
+
+
+
+
+
@@ -225,7 +241,14 @@ function TaskNode({ id, data }: NodeProps) {
- Limits
+
+
+
Limits
+
+
+
+
+
@@ -269,7 +292,7 @@ function TaskNode({ id, data }: NodeProps) {
) {
- Two Factor Authentication
+
+
+
Two-Factor Authentication
+
+
+
+
+
@@ -351,13 +381,13 @@ function TaskNode({ id, data }: NodeProps) {
handleChange("totpVerificationUrl", event.target.value);
}}
value={inputs.totpVerificationUrl ?? ""}
- placeholder="https://"
+ placeholder="Link your 2FA storage endpoint"
className="nopan"
/>
{
@@ -367,7 +397,7 @@ function TaskNode({ id, data }: NodeProps) {
handleChange("totpIdentifier", event.target.value);
}}
value={inputs.totpIdentifier ?? ""}
- placeholder="Identifier"
+ placeholder="Add an ID that links your TOTP to the task"
className="nopan"
/>
@@ -415,19 +445,23 @@ function TaskNode({ id, data }: NodeProps) {
}}
/>