fix: use tooltip-app for npmx community handles

Author: alexdln

app/pages/about.vue

@@ -275,29 +275,24 @@ const roleLabels = computed(
                 :key="contributor.id"
                 class="block group relative"
               >
-                <a
-                  :href="contributor.html_url"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  :aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
-                  class="block rounded-lg"
-                >
-                  <img
-                    :src="`${contributor.avatar_url}&s=64`"
-                    :alt="`${contributor.login}'s avatar`"
-                    width="48"
-                    height="48"
-                    class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out group-hover:scale-125 will-change-transform"
-                    loading="lazy"
-                  />
-                  <span
-                    class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
-                    dir="ltr"
-                    role="tooltip"
+                <TooltipApp :text="`@${contributor.login}`" class="block" position="top">
+                  <a
+                    :href="contributor.html_url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    :aria-label="$t('about.contributors.view_profile', { name: contributor.login })"
+                    class="block rounded-lg"
                   >
-                    @{{ contributor.login }}
-                  </span>
-                </a>
+                    <img
+                      :src="`${contributor.avatar_url}&s=64`"
+                      :alt="`${contributor.login}'s avatar`"
+                      width="48"
+                      height="48"
+                      class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out group-hover:scale-125 will-change-transform"
+                      loading="lazy"
+                    />
+                  </a>
+                </TooltipApp>
               </li>
             </ul>
           </section>

app/pages/pds.vue

@@ -156,30 +156,25 @@ const totalAccounts = computed(() => pdsUsers.value.length)
                 :key="user.handle"
                 class="block group relative hover:z-10"
               >
-                <a
-                  :href="`https://bsky.app/profile/${user.handle}`"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  :aria-label="$t('pds.community.view_profile', { handle: user.handle })"
-                  class="block rounded-lg"
-                >
-                  <img
-                    :src="user.avatar"
-                    :alt="`${user.handle}'s avatar`"
-                    @error="handleImageError(user.handle)"
-                    width="48"
-                    height="48"
-                    class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out group-hover:scale-125 will-change-transform"
-                    loading="lazy"
-                  />
-                  <span
-                    class="pointer-events-none absolute -top-9 inset-is-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900 text-xs px-2 py-1 shadow-lg opacity-0 scale-95 transition-all duration-150 group-hover:opacity-100 group-hover:scale-100"
-                    dir="ltr"
-                    role="tooltip"
+                <TooltipApp :text="`@${user.handle}`" class="block" position="top">
+                  <a
+                    :href="`https://bsky.app/profile/${user.handle}`"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    :aria-label="$t('pds.community.view_profile', { handle: user.handle })"
+                    class="block rounded-lg"
                   >
-                    @{{ user.handle }}
-                  </span>
-                </a>
+                    <img
+                      :src="user.avatar"
+                      :alt="`${user.handle}'s avatar`"
+                      @error="handleImageError(user.handle)"
+                      width="48"
+                      height="48"
+                      class="w-12 h-12 rounded-lg ring-2 ring-transparent group-hover:ring-accent transition-all duration-200 ease-out group-hover:scale-125 will-change-transform"
+                      loading="lazy"
+                    />
+                  </a>
+                </TooltipApp>
               </li>
             </ul>
             <p v-if="usersWithoutAvatars.length" class="text-center mt-4 text-fg-muted text-sm">