From 7998c84f9cf46d008c5865f6cb1c2270c6fe220d Mon Sep 17 00:00:00 2001
From: Cristhian Melo <rxtsel@hotmail.com>
Date: Sat, 12 Oct 2024 17:50:04 -0500
Subject: [PATCH] chore: replace titles attributes with custom tooltip

---
 src/components/Popover.astro     | 4 ++--
 src/components/ProjectCard.astro | 9 +++++----
 src/components/Tooltip.astro     | 2 ++
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Popover.astro b/src/components/Popover.astro
index 6d915f8..6e75bdf 100644
--- a/src/components/Popover.astro
+++ b/src/components/Popover.astro
@@ -17,12 +17,12 @@ const titleLabel =
 
 <div class='relative size-6 popover-content'>
   <label
-    class='popover-team hover:text-cBlue order-1 text-cWhite transition-colors duration-150 ease-in size-6 cursor-pointer'
+    class='popover-team relative group hover:text-cBlue order-1 text-cWhite transition-colors duration-150 ease-in size-6 cursor-pointer'
     aria-label='Team members'
-    title={titleLabel}
   >
     <input type='checkbox' class='check-popover-team' />
     <Users />
+    <Tooltip content={titleLabel} />
   </label>
 
   <nav
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index 4e81c8a..5b1d1bb 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -5,6 +5,7 @@ import Github from '@/icons/Github.astro'
 import Lock from '@/icons/Lock.astro'
 import Popover from '@/components/Popover.astro'
 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
+import Tooltip from '@/components/Tooltip.astro'
 
 export interface Props {
   props: iProject
@@ -62,20 +63,20 @@ const descriptionT = lang === 'en' ? descriptionEn : description
             href={gh}
             target='_blank'
             rel='nofollow'
-            title={t('single.repository')}
             aria-label={t('single.repository')}
             class='order-2'
           >
-            <div class='text-cWhite transition-colors duration-150 ease-in hover:text-cBlue size-6'>
+            <div class='text-cWhite group relative transition-colors duration-150 ease-in hover:text-cBlue size-6'>
               <Github />
+              <Tooltip content={t('single.repository')} />
             </div>
           </a>
         ) : (
           <div
-            class='order-2 text-neutral-600 size-6'
-            title={t('messages.ghPrivate')}
+            class='order-2 relative group text-neutral-600 size-6'
           >
             <Lock />
+            <Tooltip content={t('messages.ghPrivate')} />
           </div>
         )
       }
diff --git a/src/components/Tooltip.astro b/src/components/Tooltip.astro
index d4ff545..1ea8417 100644
--- a/src/components/Tooltip.astro
+++ b/src/components/Tooltip.astro
@@ -1,4 +1,6 @@
 ---
+// For use tooltip, add `relative group` class to parent container
+
 export interface Props {
   content: string;
 }