[Core] [DataSet] [Visual] Add table cell tooltip

core/datacap-web/src/components/visual/components/VisualTable.vue

@@ -23,9 +23,27 @@ export default {
       const columns = createdTableHeader(this.configuration.headers)
       const options = {
         records: this.configuration.columns,
-        columns
+        columns,
+        hover: {
+          highlightMode: 'row' as const
+        },
+        tooltip: {
+          isShowOverflowTextTooltip: true,
+        }
       }
-      window['tableInstance'] = new VTable.ListTable(document.getElementById('content'), options)
+      const tableInstance = new VTable.ListTable(document.getElementById('content'), options)
+      window['tableInstance'] = tableInstance
+      // Add cell tooltip
+      tableInstance.on('mouseenter_cell', (args) => {
+        const {col, row} = args;
+        const rect = tableInstance.getVisibleCellRangeRelativeRect({col, row});
+        tableInstance.showTooltip(col, row, {
+          content: `${tableInstance.getHeaderField(col, row)} : ${tableInstance.getCellValue(col, row)}`,
+          referencePosition: {rect, placement: VTable.TYPES.Placement.right},
+          className: 'defineTooltip',
+          style: {bgColor: 'black', color: 'white', arrowMark: true}
+        })
+      })
     })
   }
 }