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>
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}
+        />
+    );
+};