From c5919752a47e561f5882a598500c821ca28c877a Mon Sep 17 00:00:00 2001
From: Rajat Dabade <rajat.dabade@mattermost.com>
Date: Fri, 16 Dec 2022 01:47:55 +0530
Subject: [PATCH] ToolTip for Table view menu (#4328)

---
 webapp/i18n/en.json                           |   3 +-
 .../__snapshots__/centerPanel.test.tsx.snap   | 529 +++++++++++-------
 .../table/__snapshots__/table.test.tsx.snap   | 207 ++++---
 .../__snapshots__/tableRow.test.tsx.snap      | 115 ++--
 .../__snapshots__/tableRows.test.tsx.snap     |  23 +-
 webapp/src/components/table/tableRow.tsx      |  13 +-
 6 files changed, 543 insertions(+), 347 deletions(-)

diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 403efc569..fa64189e7 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -284,6 +284,7 @@
   "TableHeaderMenu.insert-right": "Insert right",
   "TableHeaderMenu.sort-ascending": "Sort ascending",
   "TableHeaderMenu.sort-descending": "Sort descending",
+  "TableRow.MoreOption": "More actions",
   "TableRow.delete": "Delete",
   "TableRow.open": "Open",
   "TopBar.give-feedback": "Give feedback",
@@ -437,4 +438,4 @@
   "tutorial_tip.ok": "Next",
   "tutorial_tip.out": "Opt out of these tips.",
   "tutorial_tip.seen": "Seen this before?"
-}
+}
\ No newline at end of file
diff --git a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
index 0f499c0c7..2cd510c16 100644
--- a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
@@ -460,16 +460,21 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -528,16 +533,21 @@ exports[`components/centerPanel Clicking on the Hidden card count should open a
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -1711,16 +1721,21 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -1779,16 +1794,21 @@ exports[`components/centerPanel return centerPanel and click on new card to edit
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -2768,16 +2788,21 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -2836,16 +2861,21 @@ exports[`components/centerPanel return centerPanel and press touch ctrl+d for on
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -3416,16 +3446,21 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -3484,16 +3519,21 @@ exports[`components/centerPanel return centerPanel and press touch del for one c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -4064,16 +4104,21 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -4132,16 +4177,21 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -4712,16 +4762,21 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -4780,16 +4835,21 @@ exports[`components/centerPanel return centerPanel and press touch esc for one c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -5360,16 +5420,21 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -5428,16 +5493,21 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -6008,16 +6078,21 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -6076,16 +6151,21 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -6656,16 +6736,21 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -6724,16 +6809,21 @@ exports[`components/centerPanel return centerPanel and press touch esc for two c
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -7304,16 +7394,21 @@ exports[`components/centerPanel return centerPanel and select one card and click
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -7372,16 +7467,21 @@ exports[`components/centerPanel return centerPanel and select one card and click
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -7952,16 +8052,21 @@ exports[`components/centerPanel return centerPanel and select one card and click
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -8020,16 +8125,21 @@ exports[`components/centerPanel return centerPanel and select one card and click
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
@@ -9913,16 +10023,21 @@ exports[`components/centerPanel should match snapshot for Table 1`] = `
                   class="MenuWrapper optionsMenu ml-2 mr-2"
                   role="button"
                 >
-                  <button
-                    aria-label="MenuBtn"
-                    class="IconButton"
-                    title="MenuBtn"
-                    type="button"
+                  <div
+                    class="octo-tooltip tooltip-top"
+                    data-tooltip="More actions"
                   >
-                    <i
-                      class="CompassIcon icon-dots-horizontal OptionsIcon"
-                    />
-                  </button>
+                    <button
+                      aria-label="MenuBtn"
+                      class="IconButton"
+                      title="MenuBtn"
+                      type="button"
+                    >
+                      <i
+                        class="CompassIcon icon-dots-horizontal OptionsIcon"
+                      />
+                    </button>
+                  </div>
                 </div>
                 <div
                   class="open-button"
diff --git a/webapp/src/components/table/__snapshots__/table.test.tsx.snap b/webapp/src/components/table/__snapshots__/table.test.tsx.snap
index af38d4e80..711e59c36 100644
--- a/webapp/src/components/table/__snapshots__/table.test.tsx.snap
+++ b/webapp/src/components/table/__snapshots__/table.test.tsx.snap
@@ -174,16 +174,21 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
               class="MenuWrapper optionsMenu ml-2 mr-2"
               role="button"
             >
-              <button
-                aria-label="MenuBtn"
-                class="IconButton"
-                title="MenuBtn"
-                type="button"
+              <div
+                class="octo-tooltip tooltip-top"
+                data-tooltip="More actions"
               >
-                <i
-                  class="CompassIcon icon-dots-horizontal OptionsIcon"
-                />
-              </button>
+                <button
+                  aria-label="MenuBtn"
+                  class="IconButton"
+                  title="MenuBtn"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
             </div>
             <div
               class="open-button"
@@ -290,16 +295,21 @@ exports[`components/table/Table extended should match snapshot with CreatedAt 1`
               class="MenuWrapper optionsMenu ml-2 mr-2"
               role="button"
             >
-              <button
-                aria-label="MenuBtn"
-                class="IconButton"
-                title="MenuBtn"
-                type="button"
+              <div
+                class="octo-tooltip tooltip-top"
+                data-tooltip="More actions"
               >
-                <i
-                  class="CompassIcon icon-dots-horizontal OptionsIcon"
-                />
-              </button>
+                <button
+                  aria-label="MenuBtn"
+                  class="IconButton"
+                  title="MenuBtn"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
             </div>
             <div
               class="open-button"
@@ -614,16 +624,21 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
               class="MenuWrapper optionsMenu ml-2 mr-2"
               role="button"
             >
-              <button
-                aria-label="MenuBtn"
-                class="IconButton"
-                title="MenuBtn"
-                type="button"
+              <div
+                class="octo-tooltip tooltip-top"
+                data-tooltip="More actions"
               >
-                <i
-                  class="CompassIcon icon-dots-horizontal OptionsIcon"
-                />
-              </button>
+                <button
+                  aria-label="MenuBtn"
+                  class="IconButton"
+                  title="MenuBtn"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
             </div>
             <div
               class="open-button"
@@ -734,16 +749,21 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
               class="MenuWrapper optionsMenu ml-2 mr-2"
               role="button"
             >
-              <button
-                aria-label="MenuBtn"
-                class="IconButton"
-                title="MenuBtn"
-                type="button"
+              <div
+                class="octo-tooltip tooltip-top"
+                data-tooltip="More actions"
               >
-                <i
-                  class="CompassIcon icon-dots-horizontal OptionsIcon"
-                />
-              </button>
+                <button
+                  aria-label="MenuBtn"
+                  class="IconButton"
+                  title="MenuBtn"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
             </div>
             <div
               class="open-button"
@@ -1062,16 +1082,21 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
               class="MenuWrapper optionsMenu ml-2 mr-2"
               role="button"
             >
-              <button
-                aria-label="MenuBtn"
-                class="IconButton"
-                title="MenuBtn"
-                type="button"
+              <div
+                class="octo-tooltip tooltip-top"
+                data-tooltip="More actions"
               >
-                <i
-                  class="CompassIcon icon-dots-horizontal OptionsIcon"
-                />
-              </button>
+                <button
+                  aria-label="MenuBtn"
+                  class="IconButton"
+                  title="MenuBtn"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
             </div>
             <div
               class="open-button"
@@ -1178,16 +1203,21 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
               class="MenuWrapper optionsMenu ml-2 mr-2"
               role="button"
             >
-              <button
-                aria-label="MenuBtn"
-                class="IconButton"
-                title="MenuBtn"
-                type="button"
+              <div
+                class="octo-tooltip tooltip-top"
+                data-tooltip="More actions"
               >
-                <i
-                  class="CompassIcon icon-dots-horizontal OptionsIcon"
-                />
-              </button>
+                <button
+                  aria-label="MenuBtn"
+                  class="IconButton"
+                  title="MenuBtn"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
             </div>
             <div
               class="open-button"
@@ -1502,16 +1532,21 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
               class="MenuWrapper optionsMenu ml-2 mr-2"
               role="button"
             >
-              <button
-                aria-label="MenuBtn"
-                class="IconButton"
-                title="MenuBtn"
-                type="button"
+              <div
+                class="octo-tooltip tooltip-top"
+                data-tooltip="More actions"
               >
-                <i
-                  class="CompassIcon icon-dots-horizontal OptionsIcon"
-                />
-              </button>
+                <button
+                  aria-label="MenuBtn"
+                  class="IconButton"
+                  title="MenuBtn"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
             </div>
             <div
               class="open-button"
@@ -1622,16 +1657,21 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
               class="MenuWrapper optionsMenu ml-2 mr-2"
               role="button"
             >
-              <button
-                aria-label="MenuBtn"
-                class="IconButton"
-                title="MenuBtn"
-                type="button"
+              <div
+                class="octo-tooltip tooltip-top"
+                data-tooltip="More actions"
               >
-                <i
-                  class="CompassIcon icon-dots-horizontal OptionsIcon"
-                />
-              </button>
+                <button
+                  aria-label="MenuBtn"
+                  class="IconButton"
+                  title="MenuBtn"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
             </div>
             <div
               class="open-button"
@@ -2259,16 +2299,21 @@ exports[`components/table/Table should match snapshot 1`] = `
               class="MenuWrapper optionsMenu ml-2 mr-2"
               role="button"
             >
-              <button
-                aria-label="MenuBtn"
-                class="IconButton"
-                title="MenuBtn"
-                type="button"
+              <div
+                class="octo-tooltip tooltip-top"
+                data-tooltip="More actions"
               >
-                <i
-                  class="CompassIcon icon-dots-horizontal OptionsIcon"
-                />
-              </button>
+                <button
+                  aria-label="MenuBtn"
+                  class="IconButton"
+                  title="MenuBtn"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
             </div>
             <div
               class="open-button"
diff --git a/webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap b/webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
index 256081afd..14d421230 100644
--- a/webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
+++ b/webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
@@ -45,16 +45,21 @@ exports[`components/table/TableRow should match snapshot 1`] = `
         class="MenuWrapper optionsMenu ml-2 mr-2"
         role="button"
       >
-        <button
-          aria-label="MenuBtn"
-          class="IconButton"
-          title="MenuBtn"
-          type="button"
+        <div
+          class="octo-tooltip tooltip-top"
+          data-tooltip="More actions"
         >
-          <i
-            class="CompassIcon icon-dots-horizontal OptionsIcon"
-          />
-        </button>
+          <button
+            aria-label="MenuBtn"
+            class="IconButton"
+            title="MenuBtn"
+            type="button"
+          >
+            <i
+              class="CompassIcon icon-dots-horizontal OptionsIcon"
+            />
+          </button>
+        </div>
       </div>
       <div
         class="open-button"
@@ -118,16 +123,21 @@ exports[`components/table/TableRow should match snapshot, collapsed tree 1`] = `
         class="MenuWrapper optionsMenu ml-2 mr-2"
         role="button"
       >
-        <button
-          aria-label="MenuBtn"
-          class="IconButton"
-          title="MenuBtn"
-          type="button"
+        <div
+          class="octo-tooltip tooltip-top"
+          data-tooltip="More actions"
         >
-          <i
-            class="CompassIcon icon-dots-horizontal OptionsIcon"
-          />
-        </button>
+          <button
+            aria-label="MenuBtn"
+            class="IconButton"
+            title="MenuBtn"
+            type="button"
+          >
+            <i
+              class="CompassIcon icon-dots-horizontal OptionsIcon"
+            />
+          </button>
+        </div>
       </div>
       <div
         class="open-button"
@@ -191,16 +201,21 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
         class="MenuWrapper optionsMenu ml-2 mr-2"
         role="button"
       >
-        <button
-          aria-label="MenuBtn"
-          class="IconButton"
-          title="MenuBtn"
-          type="button"
+        <div
+          class="octo-tooltip tooltip-top"
+          data-tooltip="More actions"
         >
-          <i
-            class="CompassIcon icon-dots-horizontal OptionsIcon"
-          />
-        </button>
+          <button
+            aria-label="MenuBtn"
+            class="IconButton"
+            title="MenuBtn"
+            type="button"
+          >
+            <i
+              class="CompassIcon icon-dots-horizontal OptionsIcon"
+            />
+          </button>
+        </div>
       </div>
       <div
         class="open-button"
@@ -302,16 +317,21 @@ exports[`components/table/TableRow should match snapshot, isSelected 1`] = `
         class="MenuWrapper optionsMenu ml-2 mr-2"
         role="button"
       >
-        <button
-          aria-label="MenuBtn"
-          class="IconButton"
-          title="MenuBtn"
-          type="button"
+        <div
+          class="octo-tooltip tooltip-top"
+          data-tooltip="More actions"
         >
-          <i
-            class="CompassIcon icon-dots-horizontal OptionsIcon"
-          />
-        </button>
+          <button
+            aria-label="MenuBtn"
+            class="IconButton"
+            title="MenuBtn"
+            type="button"
+          >
+            <i
+              class="CompassIcon icon-dots-horizontal OptionsIcon"
+            />
+          </button>
+        </div>
       </div>
       <div
         class="open-button"
@@ -421,16 +441,21 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
         class="MenuWrapper optionsMenu ml-2 mr-2"
         role="button"
       >
-        <button
-          aria-label="MenuBtn"
-          class="IconButton"
-          title="MenuBtn"
-          type="button"
+        <div
+          class="octo-tooltip tooltip-top"
+          data-tooltip="More actions"
         >
-          <i
-            class="CompassIcon icon-dots-horizontal OptionsIcon"
-          />
-        </button>
+          <button
+            aria-label="MenuBtn"
+            class="IconButton"
+            title="MenuBtn"
+            type="button"
+          >
+            <i
+              class="CompassIcon icon-dots-horizontal OptionsIcon"
+            />
+          </button>
+        </div>
       </div>
       <div
         class="open-button"
diff --git a/webapp/src/components/table/__snapshots__/tableRows.test.tsx.snap b/webapp/src/components/table/__snapshots__/tableRows.test.tsx.snap
index 3a69efe8a..bbc5c8299 100644
--- a/webapp/src/components/table/__snapshots__/tableRows.test.tsx.snap
+++ b/webapp/src/components/table/__snapshots__/tableRows.test.tsx.snap
@@ -45,16 +45,21 @@ exports[`components/table/TableRows should match snapshot, fire events 1`] = `
         class="MenuWrapper optionsMenu ml-2 mr-2"
         role="button"
       >
-        <button
-          aria-label="MenuBtn"
-          class="IconButton"
-          title="MenuBtn"
-          type="button"
+        <div
+          class="octo-tooltip tooltip-top"
+          data-tooltip="More actions"
         >
-          <i
-            class="CompassIcon icon-dots-horizontal OptionsIcon"
-          />
-        </button>
+          <button
+            aria-label="MenuBtn"
+            class="IconButton"
+            title="MenuBtn"
+            type="button"
+          >
+            <i
+              class="CompassIcon icon-dots-horizontal OptionsIcon"
+            />
+          </button>
+        </div>
       </div>
       <div
         class="open-button"
diff --git a/webapp/src/components/table/tableRow.tsx b/webapp/src/components/table/tableRow.tsx
index d96647cac..7d6723a75 100644
--- a/webapp/src/components/table/tableRow.tsx
+++ b/webapp/src/components/table/tableRow.tsx
@@ -20,6 +20,7 @@ import IconButton from '../../widgets/buttons/iconButton'
 import CompassIcon from '../../widgets/icons/compassIcon'
 import OptionsIcon from '../../widgets/icons/options'
 import DeleteIcon from '../../widgets/icons/delete'
+import Tooltip from '../../widgets/tooltip'
 import ConfirmationDialogBox, {ConfirmationDialogBoxProps} from '../confirmationDialogBox'
 import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../../telemetry/telemetryClient'
 
@@ -175,10 +176,14 @@ const TableRow = (props: Props) => {
                         className='optionsMenu ml-2 mr-2'
                         stopPropagationOnToggle={true}
                     >
-                        <IconButton
-                            title='MenuBtn'
-                            icon={<OptionsIcon/>}
-                        />
+                        <Tooltip
+                            title={intl.formatMessage({id: 'TableRow.MoreOption', defaultMessage: 'More actions'})}
+                        >
+                            <IconButton
+                                title='MenuBtn'
+                                icon={<OptionsIcon/>}
+                            />
+                        </Tooltip>
                         <Menu>
                             <Menu.Text
                                 icon={<DeleteIcon/>}