From 26205c1d9a6706fd1212e3b24aec0561a7caba0b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Apr 2022 13:19:53 +0800
Subject: [PATCH] enhancement: add tooltip

---
 .../nc-gui/components/templates/editor.vue    | 59 +++++++++++--------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui/components/templates/editor.vue b/packages/nc-gui/components/templates/editor.vue
index 30f4840b45..b9e353c93d 100644
--- a/packages/nc-gui/components/templates/editor.vue
+++ b/packages/nc-gui/components/templates/editor.vue
@@ -118,15 +118,24 @@
                       </span>
 
                       <v-spacer />
-                      <v-icon
-                        v-if="!viewMode"
-                        class="flex-grow-0 mr-2"
-                        small
-                        color="grey"
-                        @click.stop="deleteTable(i)"
+                      <v-tooltip
+                        bottom
                       >
-                        mdi-delete-outline
-                      </v-icon>
+                          <template #activator="{ on }">
+                          <v-icon
+                            v-if="!viewMode"
+                            class="flex-grow-0 mr-2"
+                            small
+                            color="grey"
+                            @click.stop="deleteTable(i)"
+                            v-on="on"
+                          >
+                            mdi-delete-outline
+                          </v-icon>  
+                          </template>
+                          <!-- TODO: i18n -->
+                        <span>Delete Table</span>
+                      </v-tooltip>
                     </v-expansion-panel-header>
                     <v-expansion-panel-content>
                       <!--                <v-toolbar>
@@ -486,25 +495,29 @@
                                   "
                                 />
                                 <td style="max-width: 50px; width: 50px">
-                                  <v-icon
-                                    v-if="!viewMode"
-                                    class="flex-grow-0"
-                                    small
-                                    color="grey"
-                                    @click.stop="
-                                      deleteTableColumn(i, j, col, table)
-                                    "
+                                  <v-tooltip
+                                    bottom
                                   >
-                                    mdi-delete-outline
-                                  </v-icon>
+                                   <template #activator="{ on }">
+                                      <v-icon
+                                          v-if="!viewMode"
+                                          class="flex-grow-0"
+                                          small
+                                          color="grey"
+                                          @click.stop="
+                                            deleteTableColumn(i, j, col, table)
+                                          "
+                                          v-on="on"
+                                        >
+                                          mdi-delete-outline
+                                        </v-icon>
+                                      </template>
+                                      <!-- TODO: i18n -->
+                                    <span>Delete Column</span>
+                                  </v-tooltip>
                                 </td>
                               </template>
                             </tr>
-
-                            <!--                  <tr>-->
-                            <!--                    <td colspan='4' class='text-center pa-2'>-->
-                            <!--                    </td>-->
-                            <!--                  </tr>-->
                           </tbody>
                         </v-simple-table>