From 659ad28e04843eb869efe21ca0dc6bed42b7d93f Mon Sep 17 00:00:00 2001
From: Paula Stachova <paula.stachova@mongodb.com>
Date: Mon, 13 Oct 2025 10:06:23 +0200
Subject: [PATCH] fix: add tooltips to all DM toolbar items COMPASS-9830

---
 .../src/components/diagram-editor-toolbar.tsx | 66 +++++++++++++------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/packages/compass-data-modeling/src/components/diagram-editor-toolbar.tsx b/packages/compass-data-modeling/src/components/diagram-editor-toolbar.tsx
index a38f4fecfb5..4f3b14ba1a6 100644
--- a/packages/compass-data-modeling/src/components/diagram-editor-toolbar.tsx
+++ b/packages/compass-data-modeling/src/components/diagram-editor-toolbar.tsx
@@ -98,26 +98,44 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
         data-testid="diagram-editor-toolbar"
       >
         <div className={toolbarGroupStyles}>
-          <IconButton
-            aria-label="Undo"
-            disabled={!hasUndo}
-            onClick={onUndoClick}
+          <Tooltip
+            trigger={
+              <IconButton
+                aria-label="Undo"
+                disabled={!hasUndo}
+                onClick={onUndoClick}
+              >
+                <Icon glyph="Undo"></Icon>
+              </IconButton>
+            }
           >
-            <Icon glyph="Undo"></Icon>
-          </IconButton>
-          <IconButton
-            aria-label="Redo"
-            disabled={!hasRedo}
-            onClick={onRedoClick}
+            Undo
+          </Tooltip>
+          <Tooltip
+            trigger={
+              <IconButton
+                aria-label="Redo"
+                disabled={!hasRedo}
+                onClick={onRedoClick}
+              >
+                <Icon glyph="Redo"></Icon>
+              </IconButton>
+            }
           >
-            <Icon glyph="Redo"></Icon>
-          </IconButton>
-          <IconButton
-            aria-label="Add Collection"
-            onClick={onAddCollectionClick}
+            Redo
+          </Tooltip>
+          <Tooltip
+            trigger={
+              <IconButton
+                aria-label="Add Collection"
+                onClick={onAddCollectionClick}
+              >
+                <AddCollection />
+              </IconButton>
+            }
           >
-            <AddCollection />
-          </IconButton>
+            Add a new collection
+          </Tooltip>
           <Tooltip
             trigger={
               <IconButton
@@ -134,13 +152,19 @@ export const DiagramEditorToolbar: React.FunctionComponent<{
               </IconButton>
             }
           >
-            Drag from one collection to another to create a relationship.
+            Add a relationship by dragging from one collection to another
           </Tooltip>
         </div>
         <div className={toolbarGroupStyles}>
-          <Button size="xsmall" aria-label="Export" onClick={onExportClick}>
-            <Icon glyph="Export"></Icon>
-          </Button>
+          <Tooltip
+            trigger={
+              <Button size="xsmall" aria-label="Export" onClick={onExportClick}>
+                <Icon glyph="Export"></Icon>
+              </Button>
+            }
+          >
+            Export data model
+          </Tooltip>
         </div>
       </div>
     </div>