feat: adding tooltips to all toolbar buttons

amplience · Jun 13, 2024 · 428aa26 · 428aa26
1 parent 6e3ca31
commit 428aa26
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/packages/extension/src/ProseMirrorToolbar/ProseMirrorToolbar.tsx b/packages/extension/src/ProseMirrorToolbar/ProseMirrorToolbar.tsx
@@ -44,6 +44,7 @@ const styles = createStyles({
   tooltip: {
     fontSize: 12,
     backgroundColor: "#1A222D",
+    maxWidth: 340
   },
   arrow: {
     color: "#1A222D",
@@ -55,7 +56,7 @@ const tooltips = {
     title: "Use ChatGPT to improve your copy"
   },
   contentStudio: {
-    title: "Generate personalized product content with Content Studio (launches new tab)"
+    title: "Generate on-brand content at scale with Content Studio"
   }
 }
 

diff --git a/packages/extension/src/ProseMirrorToolbarIconButton/ProseMirrorToolbarIconButton.tsx b/packages/extension/src/ProseMirrorToolbarIconButton/ProseMirrorToolbarIconButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton, withStyles, WithStyles } from "@material-ui/core";
+import { IconButton, Tooltip, withStyles, WithStyles } from "@material-ui/core";
 import React, { PropsWithChildren } from "react";
 
 import { ProseMirrorToolbarContext } from "../ProseMirrorToolbar";
@@ -14,7 +14,15 @@ export interface ProseMirrorToolbarButtonProps
 const styles = {
   root: {
     margin: "1px"
-  }
+  },
+  tooltip: {
+    fontSize: 12,
+    backgroundColor: "#1A222D",
+    maxWidth: 240
+  },
+  arrow: {
+    color: "#1A222D",
+  },
 };
 
 const ProseMirrorToolbarIconButton: React.SFC<ProseMirrorToolbarButtonProps> = (
@@ -48,16 +56,25 @@ const ProseMirrorToolbarIconButton: React.SFC<ProseMirrorToolbarButtonProps> = (
   }
 
   return (
-    <IconButton
-      className={clsx(classes.root)}
-      onMouseDown={handleClick}
-      size="small"
-      disabled={!toolState.enabled || props.isLocked}
-      color={toolState.active ? "primary" : "default"}
-      title={toolState.label}
+    <Tooltip 
+      title={toolState.label} 
+      arrow 
+      classes={{
+        arrow: clsx(classes.arrow),
+        tooltip: clsx(classes.tooltip),
+      }}
     >
-      {toolState.displayIcon ? toolState.displayIcon : toolState.label}
-    </IconButton>
+      <IconButton
+        className={clsx(classes.root)}
+        onMouseDown={handleClick}
+        size="small"
+        disabled={!toolState.enabled || props.isLocked}
+        color={toolState.active ? "primary" : "default"}
+        title={toolState.label}
+      >
+        {toolState.displayIcon ? toolState.displayIcon : toolState.label}
+      </IconButton>
+    </Tooltip>
   );
 };