Add QuestionMarkTooltip

web/components/bio/profile-bio.tsx

@@ -6,53 +6,18 @@ import {BioBlock} from './profile-bio-block'
 import {MAX_INT, MIN_BIO_LENGTH} from "common/constants";
 import {useTextEditor} from "web/components/widgets/editor";
 import {JSONContent} from "@tiptap/core"
-import {flip, offset, shift, useFloating} from "@floating-ui/react-dom";
 import {useT} from "web/lib/locale";
+import {Row} from "web/components/layout/row";
+import {QuestionMarkTooltip} from "web/components/widgets/tooltip-question-mark";
 
 export default function TooShortBio() {
-  const [open, setOpen] = useState(false);
-  const t = useT();
-  const {y, refs, strategy} = useFloating({
-    placement: "bottom", // place below the trigger
-    middleware: [
-      offset(8), // small gap between ? and box
-      flip(),
-      shift({padding: 8}), // prevent viewport clipping
-    ],
-  });
-
+  const t = useT()
+  const text = t('profile.bio.too_short_tooltip', "Since your bio is too short, Compass' algorithm filters out your profile from search results (unless \"Include Short Bios\" is selected). This ensures searches show meaningful profiles.");
   return (
-    <p className="text-red-600">
-      {t('profile.bio.too_short', "Bio too short. Profile may be filtered from search results.")}{" "}
-      <span
-        className="inline-flex align-middle"
-        onMouseEnter={() => setOpen(true)}
-        onMouseLeave={() => setOpen(false)}
-        ref={refs.setReference}
-      >
-        <span
-          className="cursor-help text-red-600 border border-red-600 rounded-full w-5 h-5 inline-flex items-center justify-center align-middle">
-          ?
-        </span>
-      </span>
-
-      {open && (
-        <div
-          ref={refs.setFloating}
-          style={{
-            position: strategy,
-            top: y ?? 0,
-            left: "50%",
-            transform: `translateX(-50%)`,
-          }}
-          className="p-3 bg-canvas-50 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 transition-opacity w-72 max-w-[calc(100vw-1rem)] whitespace-normal break-words"
-        >
-          <p className="text-sm text-gray-800 dark:text-gray-100">
-            {t('profile.bio.too_short_tooltip', "Since your bio is too short, Compass' algorithm filters out your profile from search results (unless \"Include Short Bios\" is selected). This ensures searches show meaningful profiles.")}
-          </p>
-        </div>
-      )}
-    </p>
+    <Row className="text-red-600 gap-1">
+      <p>{t('profile.bio.too_short', "Bio too short. Profile may be filtered from search results.")}</p>
+      <QuestionMarkTooltip text={text}/>
+    </Row>
   );
 }
 

web/components/filters/search.tsx

@@ -311,8 +311,7 @@ export const Search = (props: {
         </Row>
         {(profileCount ?? 0) > 0 && (
           <Tooltip
-            text={!filters.shortBio && t('search.include_short_bios_tooltip', 'To list all the profiles, tick "Include Short Bios"')}
-                   noTap>
+            text={!filters.shortBio && t('search.include_short_bios_tooltip', 'To list all the profiles, tick "Include Short Bios"')}>
             <Row className="text-sm text-ink-500 gap-2">
               <p>{profileCount} {(profileCount ?? 0) > 1 ? t('common.people', 'people') : t('common.person', 'person')}</p>
               {!filters.shortBio && <span
@@ -321,6 +320,11 @@ export const Search = (props: {
               </span>}
             </Row>
           </Tooltip>
+
+          // <Row className="text-red-600 gap-1">
+          //   <p>{t('profile.bio.too_short', "Bio too short. Profile may be filtered from search results.")}</p>
+          //   <QuestionMarkTooltip text={!filters.shortBio && t('search.include_short_bios_tooltip', 'To list all the profiles, tick "Include Short Bios"')}/>
+          // </Row>
         )}
       </Row>
     </Col>

web/components/widgets/tooltip-question-mark.tsx

@@ -0,0 +1,49 @@
+import {useState} from "react";
+import {flip, offset, shift, useFloating} from "@floating-ui/react-dom";
+import {QuestionMarkCircleIcon} from "@heroicons/react/outline";
+
+export function QuestionMarkTooltip(props: {
+  text: string | any
+}) {
+  // Work like Tooltip but also gets triggered upon click and not just highlight (which is necessary for mobile)
+  // Use QuestionMarkTooltip for question marks (no click, no button)
+  // Use Tooltip for buttons (star, message, etc.)
+  const {text} = props
+  const [open, setOpen] = useState(false)
+  const {y, refs, strategy} = useFloating({
+    placement: "bottom", // place below the trigger
+    middleware: [
+      offset(8), // small gap between ? and box
+      flip(),
+      shift({padding: 8}), // prevent viewport clipping
+    ],
+  })
+
+  return <>
+    <span
+      className="inline-flex align-middle"
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      ref={refs.setReference}
+    >
+      <QuestionMarkCircleIcon className="w-5 h-5 inline-flex align-middle"/>
+    </span>
+
+    {open && (
+      <div
+        ref={refs.setFloating}
+        style={{
+          position: strategy,
+          top: y ?? 0,
+          left: "50%",
+          transform: `translateX(-50%)`,
+        }}
+        className="p-3 bg-canvas-50 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 transition-opacity w-72 max-w-[calc(100vw-1rem)] whitespace-normal break-words"
+      >
+        <p className="text-sm text-gray-800 dark:text-gray-100">
+          {text}
+        </p>
+      </div>
+    )}
+  </>
+}

web/messages/fr.json

@@ -408,7 +408,7 @@
   "profile.bio.tips_intro": "Rédigez une bio claire et engageante pour aider les autres à comprendre qui vous êtes et les connexions que vous recherchez. Incluez :",
   "profile.bio.tips_link": "Lire tous les conseils pour rédiger une bio de haute qualité",
   "profile.bio.tips_list": "- Vos valeurs fondamentales, intérêts et activités\n- Traits de personnalité, ce qui vous rend unique et ce qui vous tient à cœur\n- Objectifs de connexion (collaboration, amitié, romantique)\n- Attentes et limites\n- Disponibilité, comment vous contacter ou démarrer une conversation (e-mail, réseaux sociaux, etc.)\n- Optionnel : préférences romantiques, habitudes de vie et sujets de conversation",
-  "profile.bio.too_short": "Bio trop courte. Le profil peut être filtré des résultats de recherche.",
+  "profile.bio.too_short": "Bio trop courte. Votre profil n'est pas affiché dans les résultats de recherche par défaut.",
   "profile.bio.too_short_tooltip": "Comme votre bio est trop courte, l'algorithme de Compass filtre votre profil des résultats de recherche (sauf si « Inclure les bios courtes » est sélectionné). Cela garantit que les recherches affichent des profils significatifs.",
   "profile.comments.current_user_hint": "Les autres utilisateurs peuvent vous laisser des recommandations ici.",
   "profile.comments.add_comment": "Ajouter un commentaire",