From e84024d874e9807a8091decb81a8c665497c385b Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Wed, 13 May 2026 17:23:27 +0200
Subject: [PATCH 1/8] Make multi field search tooltip clickable and focusable

---
 .../SearchPage/fields/MultiFieldSearchField.tsx     | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
index f1aab7ae59..a31c6eb2b0 100644
--- a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
+++ b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
@@ -5,6 +5,7 @@ import type { MultiFieldSearch, SetSomeFieldValues } from '../../../types/config
 import { CustomTooltip } from '../../../utils/CustomTooltip';
 import type { MetadataFilterSchema } from '../../../utils/search.ts';
 import DisabledUntilHydrated from '../../DisabledUntilHydrated';
+import { Button } from '../../common/Button.tsx';
 import MaterialSymbolsHelpOutline from '~icons/material-symbols/help-outline';
 
 export interface MultiFieldSearchFieldProps {
@@ -34,11 +35,17 @@ export const MultiFieldSearchField = ({
                 />
             </DisabledUntilHydrated>
             <div className='absolute top-1/2 -translate-y-1/3 right-1.5'>
-                <span data-tooltip-id={tooltipId} className='text-gray-400 hover:text-primary-600 inline-flex'>
+                <Button data-tooltip-id={tooltipId} className='text-gray-400 hover:text-primary-600 inline-flex'>
                     <MaterialSymbolsHelpOutline className='inline-block h-6 w-5' />
-                </span>
+                </Button>
             </div>
-            <CustomTooltip id={tooltipId} place='top'>
+            <CustomTooltip
+                id={tooltipId}
+                place='top'
+                openEvents={{ mouseenter: true, focus: true, click: true }}
+                closeEvents={{ mouseleave: true, blur: true, click: true }}
+                globalCloseEvents={{ clickOutsideAnchor: true }}
+            >
                 <p className='mb-1'>Search across the following fields:</p>
                 <ul className='list-disc list-inside'>
                     {multiFieldSearch.fields.map((field) => (

From 130715bbe6557a35241a844a62aeb22c1a52eb32 Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Wed, 13 May 2026 17:40:04 +0200
Subject: [PATCH 2/8] Remove focus: true to prevent redisplaying tooltip on
 navigate back to page

---
 .../src/components/SearchPage/fields/MultiFieldSearchField.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
index a31c6eb2b0..58217dc57b 100644
--- a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
+++ b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
@@ -42,7 +42,7 @@ export const MultiFieldSearchField = ({
             <CustomTooltip
                 id={tooltipId}
                 place='top'
-                openEvents={{ mouseenter: true, focus: true, click: true }}
+                openEvents={{ mouseenter: true, focus: false, click: true }}
                 closeEvents={{ mouseleave: true, blur: true, click: true }}
                 globalCloseEvents={{ clickOutsideAnchor: true }}
             >

From 0821ee7757bbd3a66989b35c3cb5fb56b9b4466e Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Wed, 13 May 2026 17:48:35 +0200
Subject: [PATCH 3/8] Close on scroll

---
 .../src/components/SearchPage/fields/MultiFieldSearchField.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
index 58217dc57b..52e82b8408 100644
--- a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
+++ b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
@@ -44,7 +44,7 @@ export const MultiFieldSearchField = ({
                 place='top'
                 openEvents={{ mouseenter: true, focus: false, click: true }}
                 closeEvents={{ mouseleave: true, blur: true, click: true }}
-                globalCloseEvents={{ clickOutsideAnchor: true }}
+                globalCloseEvents={{ clickOutsideAnchor: true, scroll: true }}
             >
                 <p className='mb-1'>Search across the following fields:</p>
                 <ul className='list-disc list-inside'>

From 60a0d1c975b16be3f8abe224c2d2723ed717cac3 Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Wed, 13 May 2026 18:05:49 +0200
Subject: [PATCH 4/8] Delay show to prevent flickering

---
 .../src/components/SearchPage/fields/MultiFieldSearchField.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
index 52e82b8408..d3e52918ca 100644
--- a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
+++ b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
@@ -42,6 +42,7 @@ export const MultiFieldSearchField = ({
             <CustomTooltip
                 id={tooltipId}
                 place='top'
+                delayShow={200}
                 openEvents={{ mouseenter: true, focus: false, click: true }}
                 closeEvents={{ mouseleave: true, blur: true, click: true }}
                 globalCloseEvents={{ clickOutsideAnchor: true, scroll: true }}

From c9c0cd0ae79b4aaf57c53c98b469f07097ef3a90 Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Wed, 13 May 2026 18:33:43 +0200
Subject: [PATCH 5/8] Disable hover tooltip on touch only devic

---
 .../components/SearchPage/fields/MultiFieldSearchField.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
index d3e52918ca..97315e7426 100644
--- a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
+++ b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
@@ -22,6 +22,7 @@ export const MultiFieldSearchField = ({
     filterSchema,
 }: MultiFieldSearchFieldProps) => {
     const tooltipId = useId();
+    const isTouchOnly = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
 
     return (
         <div className='relative'>
@@ -42,9 +43,8 @@ export const MultiFieldSearchField = ({
             <CustomTooltip
                 id={tooltipId}
                 place='top'
-                delayShow={200}
-                openEvents={{ mouseenter: true, focus: false, click: true }}
-                closeEvents={{ mouseleave: true, blur: true, click: true }}
+                openEvents={{ mouseenter: !isTouchOnly, focus: false, click: true }}
+                closeEvents={{ mouseleave: !isTouchOnly, blur: true, click: true }}
                 globalCloseEvents={{ clickOutsideAnchor: true, scroll: true }}
             >
                 <p className='mb-1'>Search across the following fields:</p>

From a6a45b9a4cfb72fab5be1b9bcab3a47da58fc230 Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Mon, 18 May 2026 11:41:02 +0200
Subject: [PATCH 6/8] Update custom tooltip to have clickability on mobile,
 otherwise normal behaviour

---
 .../fields/MultiFieldSearchField.tsx          |  9 +-------
 website/src/utils/CustomTooltip.tsx           | 23 ++++++++++++-------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
index 97315e7426..d34b541fe9 100644
--- a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
+++ b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
@@ -22,7 +22,6 @@ export const MultiFieldSearchField = ({
     filterSchema,
 }: MultiFieldSearchFieldProps) => {
     const tooltipId = useId();
-    const isTouchOnly = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
 
     return (
         <div className='relative'>
@@ -40,13 +39,7 @@ export const MultiFieldSearchField = ({
                     <MaterialSymbolsHelpOutline className='inline-block h-6 w-5' />
                 </Button>
             </div>
-            <CustomTooltip
-                id={tooltipId}
-                place='top'
-                openEvents={{ mouseenter: !isTouchOnly, focus: false, click: true }}
-                closeEvents={{ mouseleave: !isTouchOnly, blur: true, click: true }}
-                globalCloseEvents={{ clickOutsideAnchor: true, scroll: true }}
-            >
+            <CustomTooltip id={tooltipId} place='top'>
                 <p className='mb-1'>Search across the following fields:</p>
                 <ul className='list-disc list-inside'>
                     {multiFieldSearch.fields.map((field) => (
diff --git a/website/src/utils/CustomTooltip.tsx b/website/src/utils/CustomTooltip.tsx
index 879f404c76..1f8c3b8422 100644
--- a/website/src/utils/CustomTooltip.tsx
+++ b/website/src/utils/CustomTooltip.tsx
@@ -1,12 +1,19 @@
 import type { ComponentProps, FC } from 'react';
 import { Tooltip } from 'react-tooltip';
 
-export const CustomTooltip: FC<ComponentProps<typeof Tooltip>> = ({ className, ...props }) => (
+export const CustomTooltip: FC<ComponentProps<typeof Tooltip>> = ({ className, ...props }) => {
+    const isTouchOnly = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
+
     // Set positionStrategy and z-index to make the Tooltip float above the ReviewPage toolbar
-    <Tooltip
-        positionStrategy='fixed'
-        place='right'
-        className={`z-20 max-w-sm whitespace-pre-wrap break-words ${className ?? ''}`}
-        {...props}
-    />
-);
+    return (
+        <Tooltip
+            positionStrategy='fixed'
+            place='right'
+            className={`z-20 max-w-sm whitespace-pre-wrap break-words ${className ?? ''}`}
+            openEvents={{ mouseenter: !isTouchOnly, click: isTouchOnly, focus: false }}
+            closeEvents={{ mouseleave: !isTouchOnly, click: isTouchOnly, blur: true }}
+            globalCloseEvents={{ clickOutsideAnchor: true, scroll: true }}
+            {...props}
+        />
+    );
+};

From aad76ac454c5fd0bd30b32c1416b669ae1c94ab6 Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Mon, 18 May 2026 11:46:38 +0200
Subject: [PATCH 7/8] Remove button for tooltip

---
 .../components/SearchPage/fields/MultiFieldSearchField.tsx   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
index d34b541fe9..f1aab7ae59 100644
--- a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
+++ b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
@@ -5,7 +5,6 @@ import type { MultiFieldSearch, SetSomeFieldValues } from '../../../types/config
 import { CustomTooltip } from '../../../utils/CustomTooltip';
 import type { MetadataFilterSchema } from '../../../utils/search.ts';
 import DisabledUntilHydrated from '../../DisabledUntilHydrated';
-import { Button } from '../../common/Button.tsx';
 import MaterialSymbolsHelpOutline from '~icons/material-symbols/help-outline';
 
 export interface MultiFieldSearchFieldProps {
@@ -35,9 +34,9 @@ export const MultiFieldSearchField = ({
                 />
             </DisabledUntilHydrated>
             <div className='absolute top-1/2 -translate-y-1/3 right-1.5'>
-                <Button data-tooltip-id={tooltipId} className='text-gray-400 hover:text-primary-600 inline-flex'>
+                <span data-tooltip-id={tooltipId} className='text-gray-400 hover:text-primary-600 inline-flex'>
                     <MaterialSymbolsHelpOutline className='inline-block h-6 w-5' />
-                </Button>
+                </span>
             </div>
             <CustomTooltip id={tooltipId} place='top'>
                 <p className='mb-1'>Search across the following fields:</p>

From 59d096dd6f90ebda03e6d2bb785d9bfdcfecbc03 Mon Sep 17 00:00:00 2001
From: tombch <t.brier@outlook.com>
Date: Mon, 18 May 2026 12:04:50 +0200
Subject: [PATCH 8/8] Improve clickability

---
 .../SearchPage/fields/MultiFieldSearchField.tsx        | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
index f1aab7ae59..b69e7cc917 100644
--- a/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
+++ b/website/src/components/SearchPage/fields/MultiFieldSearchField.tsx
@@ -5,6 +5,7 @@ import type { MultiFieldSearch, SetSomeFieldValues } from '../../../types/config
 import { CustomTooltip } from '../../../utils/CustomTooltip';
 import type { MetadataFilterSchema } from '../../../utils/search.ts';
 import DisabledUntilHydrated from '../../DisabledUntilHydrated';
+import { Button } from '../../common/Button.tsx';
 import MaterialSymbolsHelpOutline from '~icons/material-symbols/help-outline';
 
 export interface MultiFieldSearchFieldProps {
@@ -33,10 +34,13 @@ export const MultiFieldSearchField = ({
                     autoComplete='off'
                 />
             </DisabledUntilHydrated>
-            <div className='absolute top-1/2 -translate-y-1/3 right-1.5'>
-                <span data-tooltip-id={tooltipId} className='text-gray-400 hover:text-primary-600 inline-flex'>
+            <div className='absolute top-1/2 -translate-y-1/3 right-0'>
+                <Button
+                    data-tooltip-id={tooltipId}
+                    className='text-gray-400 hover:text-primary-600 inline-flex cursor-default px-2'
+                >
                     <MaterialSymbolsHelpOutline className='inline-block h-6 w-5' />
-                </span>
+                </Button>
             </div>
             <CustomTooltip id={tooltipId} place='top'>
                 <p className='mb-1'>Search across the following fields:</p>