Add tooltip

loculus-project · Jan 13, 2025 · 55a1ab5 · 55a1ab5
1 parent 2cad483
commit 55a1ab5
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/website/src/components/Submission/FileUpload/ColumnMappingModal.tsx b/website/src/components/Submission/FileUpload/ColumnMappingModal.tsx
@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
 import { ColumnMapping } from './ColumnMapping';
 import { type ProcessedFile } from './fileProcessing';
 import { BaseDialog } from '../../common/BaseDialog';
+import { Tooltip } from 'react-tooltip';
 
 interface ColumnMappingModalProps {
     inputFile: ProcessedFile;
@@ -66,13 +67,19 @@ export const ColumnMappingModal: FC<ColumnMappingModalProps> = ({
         <>
             <button
                 className='text-xs break-words text-gray-700 py-1.5 px-4 border border-gray-300 rounded-md hover:bg-gray-50'
+                data-tooltip-id='columnMapping'
                 onClick={(e) => {
                     e.preventDefault();
                     openDialog();
                 }}
             >
                 {openModalButtonText}
             </button>
+            <Tooltip id='columnMapping' place='bottom'>
+                If you are not using our metadata template, this allows you to map
+                <br />
+                columns in your file to the fields expected by the database.
+            </Tooltip>
             <BaseDialog title='Remap Columns' isOpen={isOpen} onClose={closeDialog} fullWidth={false}>
                 {currentMapping === null || inputColumns === null ? (
                     'Loading ...'