fix(website): fix tooltip on edit page (#6628)

resolves #6627

From claude:
I found the root cause. It's a bug in react-tooltip v6's
resolveDataTooltipAnchor function:

⏺ There's the bug. Line 259 checks currentElement instanceof HTMLElement
— but SVG elements are SVGElement, not
HTMLElement. So when data-tooltip-id is on the
<MaterialSymbolsInfoOutline> (which renders as an <svg>), the library
walks up the DOM tree and skips the SVG element entirely, never finding
the anchor.
The fix is to put data-tooltip-id on a wrapping <span> instead of on the
SVG icon directly — exactly the pattern HoverTooltip already uses.

### Screenshot

### PR Checklist
- [ ] All necessary documentation has been adapted.
- [ ] The implemented feature is covered by appropriate, automated
tests.
- [ ] Any manual testing that has been done is documented (i.e. what
exactly was tested?)

🚀 Preview: https://tooltip.loculus.org

Author: anna-parker

integration-tests/tests/specs/features/single-submit.spec.ts

@@ -1,3 +1,4 @@
+import { expect } from '@playwright/test';
 import { test } from '../../fixtures/group.fixture';
 import { SingleSequenceSubmissionPage } from '../../pages/submission.page';
 
@@ -40,3 +41,20 @@ test('submit a single sequence, all in one method', async ({ page, groupId }) =>
     );
     await page.waitForURL('**/review');
 });
+
+test('field description tooltip appears on hover', async ({ page, groupId }) => {
+    void groupId;
+    const submissionPage = new SingleSequenceSubmissionPage(page);
+    await submissionPage.navigateToSubmissionPage();
+
+    // sampleCollectionDate has a definition and guidance in the config, so the info icon should be present
+    const infoIcon = page.locator('[data-tooltip-id="field-tooltipsampleCollectionDate"]');
+    await expect(infoIcon).toBeVisible();
+
+    await infoIcon.hover();
+
+    // The tooltip should become visible after the hover delay
+    const tooltip = page.locator('#field-tooltipsampleCollectionDate');
+    await expect(tooltip).toBeVisible({ timeout: 2000 });
+    await expect(tooltip).toContainText('sampleCollectionDate');
+});

website/src/components/Edit/DataRow.tsx

@@ -39,10 +39,12 @@ export const EditableDataRow: FC<EditableRowProps> = ({ inputField, row, onChang
                             {lastWord}
                             {hasDescription && (
                                 <>
-                                    <MaterialSymbolsInfoOutline
-                                        className='inline-block h-4 w-4 text-gray-500 shrink-0 ml-1 mb-0.5'
+                                    <span
+                                        className='inline-block shrink-0 ml-1 mb-0.5'
                                         data-tooltip-id={'field-tooltip' + row.key}
-                                    />
+                                    >
+                                        <MaterialSymbolsInfoOutline className='h-4 w-4 text-gray-500' />
+                                    </span>
                                     <InputFieldTooltip
                                         id={'field-tooltip' + row.key}
                                         field={inputField}