Add tooltip to CompatibleBadge and fix z-index in profile-grid

web/components/profile-grid.tsx

@@ -145,7 +145,7 @@ function ProfilePreview(props: {
         {/*)}*/}
 
         <Row
-          className="absolute top-2 right-2 items-start justify-end px-2 pb-3">
+          className="absolute top-2 right-2 items-start justify-end px-2 pb-3 z-10">
           {/*  {currentUser ? (*/}
           {/*    <StarButton*/}
           {/*      className="!pt-0"*/}

web/components/widgets/compatible-badge.tsx

@@ -1,21 +1,27 @@
-import { BadgeCheckIcon } from '@heroicons/react/solid'
+import {BadgeCheckIcon} from '@heroicons/react/solid'
 import clsx from 'clsx'
 
-import { CompatibilityScore } from 'common/profiles/compatibility-score'
-import { formatPercent } from 'common/util/format'
-import { Row } from 'web/components/layout/row'
+import {CompatibilityScore} from 'common/profiles/compatibility-score'
+import {formatPercent} from 'common/util/format'
+import {Row} from 'web/components/layout/row'
+import {Tooltip} from "web/components/widgets/tooltip";
+import {useT} from "web/lib/locale"
 
 export const CompatibleBadge = (props: {
   compatibility: CompatibilityScore
   className?: string
 }) => {
-  const { compatibility, className } = props
+  const {compatibility, className} = props
+  const t = useT()
   return (
-    <Row
-      className={clsx('items-center gap-1 text-sm font-semibold', className)}
-    >
-      <BadgeCheckIcon className="h-4 w-4" />
-      {formatPercent(compatibility.score ?? 0)}{' '}
-    </Row>
+    <Tooltip
+      text={t('compatibility.tooltip', 'Compatibility score between you two')}>
+      <Row
+        className={clsx('items-center gap-1 text-sm font-semibold', className)}
+      >
+        <BadgeCheckIcon className="h-4 w-4"/>
+        {formatPercent(compatibility.score ?? 0)}{' '}
+      </Row>
+    </Tooltip>
   )
 }

web/messages/de.json

@@ -147,6 +147,7 @@
   "compatibility.tabs.skipped": "Übersprungen",
   "compatibility.tabs.to_answer": "Zu beantworten",
   "compatibility.title": "Ihre Kompatibilitätsfragen",
+  "compatibility.tooltip": "Kompatibilitätswert zwischen Ihnen beiden",
   "contact.editor.placeholder": "Kontaktieren Sie uns hier...",
   "contact.form_link": "Feedback-Formular",
   "contact.intro_middle": " oder über unsere ",

web/messages/fr.json

@@ -147,6 +147,7 @@
   "compatibility.tabs.skipped": "Ignorés",
   "compatibility.tabs.to_answer": "À répondre",
   "compatibility.title": "Vos questions de compatibilité",
+  "compatibility.tooltip": "Compatibilité entre vous deux",
   "contact.editor.placeholder": "Contactez-nous ici...",
   "contact.form_link": "formulaire de retour",
   "contact.intro_middle": " ou via nos ",