Merge pull request #227 from KPMP/KPMP-4782_fix-tooltip

KPMP-4782_fix-tooltip
KPMP · Oct 9, 2023 · 9994e85 · 9994e85
2 parents 7ecc275 + 1a692ef
commit 9994e85
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@fortawesome/free-regular-svg-icons": "6.0.0",
     "@fortawesome/free-solid-svg-icons": "6.0.0",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "antd": "5.9.3",
     "autoprefixer": "10.4.4",
     "axios": "0.24.0",
     "bootstrap": "5.3.0",
@@ -83,12 +84,12 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@craco/craco": "7.1.0",
     "craco-alias": "3.0.1",
     "graphql": "15.7.2",
-    "webpack-bundle-analyzer": "4.5.0",
     "npm-run-all": "4.1.5",
     "sass": "1.63.6",
-    "@babel/plugin-proposal-private-property-in-object": "7.21.11"
+    "webpack-bundle-analyzer": "4.5.0"
   }
 }
diff --git a/src/components/SpatialViewer/ImageDatasetList.js b/src/components/SpatialViewer/ImageDatasetList.js
@@ -6,6 +6,7 @@ import { resultConverter } from "../../helpers/dataHelper";
 import { getImageTypeTooltipCopy } from "./viewConfigHelper";
 import { faXmark, faAnglesRight, faAnglesLeft, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tooltip } from "antd";
 import {
     SortingState,
     PagingState,
@@ -140,6 +141,7 @@ class ImageDatasetList extends Component {
                 hideable: true,
                 defaultHidden: false,
                 getCellValue: this.getImageTypeCell
+
             },
             {
                 name: 'level',
@@ -183,18 +185,13 @@ class ImageDatasetList extends Component {
     };
 
     getImageTypeCell = (row) => {
-        return row["imagetype"] !== "" &&
+        return ( <Tooltip color='black' placement='bottom' title={getImageTypeTooltipCopy(row['imagetype'])}>
             <div className={`image-type-cell ${(getImageTypeTooltipCopy(row["imagetype"]) !== "") ? 'clickable': '' }`}>
                 <span className='me-1'>{row["imagetype"]}</span>
-                {getImageTypeTooltipCopy(row["imagetype"]) !== "" &&
-                <div>
-                    <div className='tooltip-parent-sibling'></div>
-                    <div className='tooltip-parent rounded border shadow mt-2 p-2'>
-                        <span className='tooltip-child'>{getImageTypeTooltipCopy(row["imagetype"])}</span>
-                    </div>
-                </div>
-                }
+                {getImageTypeTooltipCopy(row["imagetype"]) !== ""}
             </div>
+        </Tooltip>
+        )
     };
 
     getDefaultColumnWidths = () => {
@@ -442,4 +439,4 @@ class ImageDatasetList extends Component {
     }
 }
 
-export default ImageDatasetList;
+export default ImageDatasetList;
diff --git a/src/index.scss b/src/index.scss
@@ -195,30 +195,6 @@ th[title='Pixels Type'], th[title='Pixels Type'] + td {
     color: #212529;
 }
 
-tr:nth-last-of-type(1) .tooltip-parent-sibling,
-tr:nth-last-of-type(2) .tooltip-parent-sibling,
-tr:nth-last-of-type(3) .tooltip-parent-sibling {
-    cursor: pointer !important;
-    font-size: 14px;
-    margin-bottom: -5.75rem !important;
-    margin-left: 2rem !important;
-}
-.tooltip-parent {
-    z-index: 10;
-    cursor: pointer;
-    white-space: normal;
-    position: absolute;
-    background-color: #fff;
-    display: none;
-    width: 23rem;
-}
-
-td:hover {
-    .tooltip-parent {
-        display: block !important;
-    }
-}
-
 .icon-row .col {
     max-width: 90%;
 }