diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
index 59110aef..3d93e942 100644
--- a/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
+++ b/apps/portal/src/components/resumes/badges/ResumeUserBadge.tsx
@@ -3,25 +3,25 @@ import type { BadgeIcon } from './resumeBadgeConstants';
type Props = Readonly<{
description: string;
icon: BadgeIcon;
- toolTip: string;
+ title: string;
}>;
export default function ResumeUserBadge({
description,
icon: Icon,
- toolTip,
+ title,
}: Props) {
return (
+ className="absolute -top-0 hidden w-64 -translate-y-full flex-col
+ justify-center gap-1 rounded-lg bg-slate-100 px-2 py-2 text-center drop-shadow-xl
+ after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2
+ after:border-8 after:border-x-transparent after:border-b-transparent
+ after:border-t-slate-100 after:drop-shadow-lg after:content-['']
+ group-hover:flex">
-
{toolTip}
+
{title}
{description}
diff --git a/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx b/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx
index d9337fae..0e621599 100644
--- a/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx
+++ b/apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx
@@ -27,7 +27,7 @@ export default function ResumeUserBadges({ userId }: Props) {
key={badge.id}
description={badge.description}
icon={badge.icon}
- toolTip={badge.toolTip}
+ title={badge.title}
/>
),
)}
diff --git a/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts b/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts
index 628e9a74..0c806437 100644
--- a/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts
+++ b/apps/portal/src/components/resumes/badges/resumeBadgeConstants.ts
@@ -15,7 +15,7 @@ export type BadgeInfo = {
icon: BadgeIcon;
id: string;
isValid: (payload: BadgePayload) => boolean;
- toolTip: string;
+ title: string;
};
// TODO: Add other badges in
@@ -34,7 +34,7 @@ export const RESUME_USER_BADGES: Array
= [
id: 'Superhero',
isValid: (payload: BadgePayload) =>
payload.reviewedResumesCount >= TIER_THREE,
- toolTip: 'True saviour of the people',
+ title: 'True saviour of the people',
},
{
description: `Reviewed over ${TIER_TWO} resumes`,
@@ -43,7 +43,7 @@ export const RESUME_USER_BADGES: Array = [
isValid: (payload: BadgePayload) =>
payload.reviewedResumesCount >= TIER_TWO &&
payload.reviewedResumesCount < TIER_THREE,
- toolTip: 'Keen eye for details like a private eye',
+ title: 'Keen eye for details like a private eye',
},
{
description: `Reviewed over ${TIER_THREE} resumes`,
@@ -52,6 +52,6 @@ export const RESUME_USER_BADGES: Array = [
isValid: (payload: BadgePayload) =>
payload.reviewedResumesCount >= TIER_ONE &&
payload.reviewedResumesCount < TIER_TWO,
- toolTip: 'As sharp as an eagle',
+ title: 'As sharp as an eagle',
},
];