Add tooltips everywhere

page/src/components/folder.tsx

@@ -14,12 +14,7 @@ import {
   ContextMenuSeparator,
   ContextMenuLabel,
 } from "@/components/ui/context-menu";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { TextTooltip } from "./text-tooltip";
 
 export enum FolderElementType {
   Folder = 0,
@@ -131,14 +126,9 @@ function renderElementWithContext(element: FolderElement, props: FolderProps) {
   return (
     <ContextMenu>
       <ContextMenuTrigger>
-        <Tooltip delayDuration={700}>
-          <TooltipTrigger asChild>
-            {renderElement(element, props)}
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>{element.name}</p>
-          </TooltipContent>
-        </Tooltip>
+        <TextTooltip tooltip={element.name}>
+          {renderElement(element, props)}
+        </TextTooltip>
       </ContextMenuTrigger>
       <ContextMenuContent>
         <ContextMenuLabel>{trimFilename(element.name)}</ContextMenuLabel>

page/src/components/settings-menu.tsx

@@ -3,6 +3,7 @@ import { Checkbox } from "./ui/checkbox";
 import { Label } from "./ui/label";
 
 import { Settings } from "@/settings";
+import { TextTooltip } from "./text-tooltip";
 
 interface SettingsMenuProps {
   settings: Settings;
@@ -10,6 +11,20 @@ interface SettingsMenuProps {
   onChange: (settings: Settings) => void;
 }
 
+interface SettingsLabelProps {
+  htmlFor?: string | undefined;
+  text: React.ReactNode;
+  tooltip: React.ReactNode;
+}
+
+function SettingsLabel(props: SettingsLabelProps) {
+  return (
+    <Label htmlFor={props.htmlFor}>
+      <TextTooltip tooltip={props.tooltip}>{props.text}</TextTooltip>
+    </Label>
+  );
+}
+
 export class SettingsMenu extends React.Component<SettingsMenuProps, Settings> {
   constructor(props: SettingsMenuProps) {
     super(props);
@@ -49,7 +64,11 @@ export class SettingsMenu extends React.Component<SettingsMenuProps, Settings> {
               this.setState({ verbose: checked });
             }}
           />
-          <Label htmlFor="settings-verbose">Verbose Logging</Label>
+          <SettingsLabel
+            htmlFor="settings-verbose"
+            text={"Verbose Logging"}
+            tooltip={"Very detailed logging of all function call and accesses"}
+          />
         </div>
 
         <div className="flex gap-6">
@@ -60,7 +79,11 @@ export class SettingsMenu extends React.Component<SettingsMenuProps, Settings> {
               this.setState({ concise: checked });
             }}
           />
-          <Label htmlFor="settings-concise">Concise Logging</Label>
+          <SettingsLabel
+            htmlFor="settings-concise"
+            text={"Concise Logging"}
+            tooltip={"Suppress logging until the application code runs"}
+          />
         </div>
 
         <div className="flex gap-6">
@@ -71,7 +94,11 @@ export class SettingsMenu extends React.Component<SettingsMenuProps, Settings> {
               this.setState({ silent: checked });
             }}
           />
-          <Label htmlFor="settings-silent">Silent Logging</Label>
+          <SettingsLabel
+            htmlFor="settings-silent"
+            text={"Silent Logging"}
+            tooltip={"Suppress all logging except for stdout"}
+          />
         </div>
 
         <div className="flex gap-6">
@@ -82,7 +109,13 @@ export class SettingsMenu extends React.Component<SettingsMenuProps, Settings> {
               this.setState({ bufferStdout: checked });
             }}
           />
-          <Label htmlFor="settings-buffer">Buffer stdout</Label>
+          <SettingsLabel
+            htmlFor="settings-buffer"
+            text={"Buffer stdout"}
+            tooltip={
+              "Group stdout and print everything when the emulation ends"
+            }
+          />
         </div>
 
         <div className="flex gap-6">
@@ -93,7 +126,11 @@ export class SettingsMenu extends React.Component<SettingsMenuProps, Settings> {
               this.setState({ execAccess: checked });
             }}
           />
-          <Label htmlFor="settings-exec">Log exec Memory Access</Label>
+          <SettingsLabel
+            htmlFor="settings-exec"
+            text={"Log exec Memory Access"}
+            tooltip={"Log when the application reads/writes executable memory"}
+          />
         </div>
 
         <div className="flex gap-6">
@@ -104,7 +141,13 @@ export class SettingsMenu extends React.Component<SettingsMenuProps, Settings> {
               this.setState({ persist: checked });
             }}
           />
-          <Label htmlFor="settings-persist">Persist filesystem</Label>
+          <SettingsLabel
+            htmlFor="settings-persist"
+            text={"Persist filesystem"}
+            tooltip={
+              "Persist files and folders that were created, modified or deleted during the emulation"
+            }
+          />
         </div>
 
         <div className="flex gap-6">
@@ -116,7 +159,13 @@ export class SettingsMenu extends React.Component<SettingsMenuProps, Settings> {
               this.setState({ wasm64: checked });
             }}
           />
-          <Label htmlFor="settings-mem64">64-Bit WebAssembly</Label>
+          <SettingsLabel
+            htmlFor="settings-mem64"
+            text={"64-Bit WebAssembly"}
+            tooltip={
+              "Use 64-bit WebAssembly which supports emulating applications that require more than 2gb of memory"
+            }
+          />
         </div>
       </div>
     );

page/src/components/text-tooltip.tsx

@@ -0,0 +1,21 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export interface TextTooltipProps {
+  children?: React.ReactNode;
+  tooltip: React.ReactNode;
+}
+
+export function TextTooltip(props: TextTooltipProps) {
+  return (
+    <Tooltip delayDuration={700} disableHoverableContent>
+      <TooltipTrigger asChild>
+        <span>{props.children}</span>
+      </TooltipTrigger>
+      <TooltipContent>{props.tooltip}</TooltipContent>
+    </Tooltip>
+  );
+}

page/src/playground.tsx

@@ -41,6 +41,7 @@ import {
 } from "@/components/ui/drawer";
 import { FilesystemExplorer } from "./filesystem-explorer";
 import { EmulationStatus } from "./emulator";
+import { TextTooltip } from "./components/text-tooltip";
 
 interface PlaygroundProps {}
 interface PlaygroundState {
@@ -344,16 +345,20 @@ export class Playground extends React.Component<
             </div>
           </header>
           <div className="flex flex-1">
-            <div className="items-center absolute z-49 right-0 rounded-bl-lg min-w-[140px] p-2 bg-[var(--background)] pointer-events-none font-medium text-right text-xs whitespace-nowrap leading-6 font-mono">
+            <div className="items-center absolute z-49 right-0 rounded-bl-lg min-w-[140px] p-2 bg-[var(--background)] cursor-default font-medium text-right text-xs whitespace-nowrap leading-6 font-mono">
               {!this.state.emulationStatus ? (
                 <></>
               ) : (
                 <>
-                  {this.state.emulationStatus.activeThreads}
-                  <BarChartSteps className="inline ml-3" />
+                  <TextTooltip tooltip={"Active threads"}>
+                    {this.state.emulationStatus.activeThreads}
+                    <BarChartSteps className="inline ml-3" />
+                  </TextTooltip>
                   <br />
-                  {this.state.emulationStatus.executedInstructions.toLocaleString()}
-                  <CpuFill className="inline ml-3" />
+                  <TextTooltip tooltip={"Executed instructions"}>
+                    {this.state.emulationStatus.executedInstructions.toLocaleString()}
+                    <CpuFill className="inline ml-3" />
+                  </TextTooltip>
                 </>
               )}
             </div>