chore: replace titles attributes with custom tooltip

rxtsel · Oct 12, 2024 · 7998c84 · 7998c84
1 parent 2426630
commit 7998c84
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git 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
@@ -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
@@ -1,4 +1,6 @@
 ---
+// For use tooltip, add `relative group` class to parent container
+
 export interface Props {
   content: string;
 }