diff --git a/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx
new file mode 100644
index 0000000000..b2ac9159ae
--- /dev/null
+++ b/editor.planx.uk/src/pages/FlowEditor/components/FlowEditor/ToggleHelpTextButton.tsx
@@ -0,0 +1,35 @@
+import HelpTextIcon from "@mui/icons-material/SpeakerNotes";
+import HelpTextOffIcon from "@mui/icons-material/SpeakerNotesOff";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+export const ToggleHelpTextButton: React.FC = () => {
+ const [showHelpText, toggleShowHelpText] = useStore((state) => [
+ state.showHelpText,
+ state.toggleShowHelpText,
+ ]);
+
+ return (
+
+ ({
+ background: theme.palette.background.paper,
+ padding: theme.spacing(1),
+ color: showHelpText
+ ? theme.palette.text.primary
+ : theme.palette.text.disabled,
+ "&:hover": {
+ background: theme.palette.common.white,
+ },
+ })}
+ >
+ {showHelpText ? : }
+
+
+ );
+};
diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
index 90c32cae45..ed6a7e445f 100644
--- a/editor.planx.uk/src/pages/FlowEditor/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -9,6 +9,7 @@ import { rootFlowPath } from "routes/utils";
import Flow from "./components/Flow";
import { ToggleDataFieldsButton } from "./components/FlowEditor/ToggleDataFieldsButton";
+import { ToggleHelpTextButton } from "./components/FlowEditor/ToggleHelpTextButton";
import { ToggleImagesButton } from "./components/FlowEditor/ToggleImagesButton";
import { ToggleTagsButton } from "./components/FlowEditor/ToggleTagsButton";
import Sidebar from "./components/Sidebar";
@@ -71,6 +72,7 @@ const FlowEditor = () => {
>
+
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index a404f6156e..a3f76792ef 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -56,6 +56,8 @@ export interface EditorUIStore {
toggleShowImages: () => void;
showDataFields: boolean;
toggleShowDataFields: () => void;
+ showHelpText: boolean;
+ toggleShowHelpText: () => void;
previousURL?: string;
currentURL: string;
initURLTracking: () => void;
@@ -92,6 +94,10 @@ export const editorUIStore: StateCreator<
toggleShowDataFields: () => set({ showDataFields: !get().showDataFields }),
+ showHelpText: false,
+
+ toggleShowHelpText: () => set({ showHelpText: !get().showHelpText }),
+
previousURL: undefined,
currentURL: window.location.pathname,