feat: Migrated from jquery-bootstrap tooltip to css based tooltip (#549)

implerhq · Apr 24, 2024 · fcb4723 · fcb4723
2 parents 34407ef + d950bb3
commit fcb4723
Show file tree

Hide file tree

Showing 5 changed files with 1,589 additions and 1,298 deletions.
diff --git a/apps/widget/package.json b/apps/widget/package.json
@@ -52,12 +52,11 @@
 		"@storybook/react": "^6.5.13",
 		"@tanstack/react-query": "^4.14.5",
 		"axios": "1.6.2",
-		"bootstrap": "4.6.0",
+		"cooltipz-css": "^2.3.0",
 		"cross-env": "^7.0.3",
 		"file-saver": "^2.0.5",
 		"handsontable": "^13.1.0",
 		"http-server": "^14.1.1",
-		"jquery": "^3.7.1",
 		"moment": "^2.29.4",
 		"react": "18.2.0",
 		"react-datepicker": "^4.21.0",

diff --git a/apps/widget/src/components/Common/Table/HandsonTable.styles.min.css b/apps/widget/src/components/Common/Table/HandsonTable.styles.min.css
@@ -1,3 +1,6 @@
+.handsontable td {
+    overflow: unset !important;
+}
 .custom-cell {
     text-align: center;
     padding: 5px !important;
@@ -12,7 +15,6 @@
     cursor: pointer;
     text-align: center;
     padding: 5px !important;
-
 }
 .del-btn {
     color: #fff;
@@ -24,6 +26,10 @@
 .del-btn:hover {
     background-color: #d00;
 }
+.del-btn svg:hover {
+    fill: #fff;
+    cursor: pointer
+}
 
 .list-wrapper {
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.09);

diff --git a/apps/widget/src/components/Common/Table/Table.tsx b/apps/widget/src/components/Common/Table/Table.tsx
@@ -1,9 +1,7 @@
 /* eslint-disable max-len */
 import { forwardRef } from 'react';
 import { HotTable } from '@handsontable/react';
-// eslint-disable-next-line id-length
-import $ from 'jquery';
-
+import 'cooltipz-css/cooltipz.min.css';
 import {
   TextCellType,
   DateCellType,
@@ -60,19 +58,16 @@ Handsontable.renderers.registerRenderer(
   function renderer(instance, TD, row, col, prop, value, cellProperties) {
     const name = String(prop).replace('record.', '');
     TD.classList.add('custom-cell');
-    $(TD).tooltip('dispose');
+    TD.ariaLabel = '';
     const soureData = instance.getSourceDataAtRow(row) as IRecord;
     let fieldValue = typeof soureData.record[name] === 'undefined' ? '' : soureData.record[name];
     if (typeof fieldValue === 'string' && fieldValue.length > name.length + 20)
       fieldValue = value.substring(0, name.length + 20) + '...';
 
     if (soureData.errors && soureData.errors[name]) {
-      $(TD).tooltip({
-        container: 'body',
-        trigger: 'hover',
-        title: soureData.errors[name],
-        placement: 'auto',
-      });
+      TD.ariaLabel = soureData.errors[name];
+      TD.dataset.cooltipzDir = row < 5 ? 'bottom' : 'top';
+      TD.dataset.cooltipzSize = 'fit';
     }
 
     if (soureData.updated && soureData.updated[name]) {

diff --git a/apps/widget/src/index.tsx b/apps/widget/src/index.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { App } from './components/App';
 import { createRoot } from 'react-dom/client';
 import reportWebVitals from './reportWebVitals';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.bundle.min';
 
 const container = document.getElementById('root');
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion