From 4a7947e34a805ef7628df67fdf23bd207c8be2e9 Mon Sep 17 00:00:00 2001
From: fede <federico.nicolas.polidoro@gmail.com>
Date: Thu, 15 Jan 2026 17:48:22 -0300
Subject: [PATCH] =?UTF-8?q?A=C3=B1adidos=20tooltips=20para=20los=20seguido?=
 =?UTF-8?q?s=20y=20seguidores=20del=20panel=20de=20perfil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/CardPerfil.svelte | 67 +++++++++++++++++++++-------
 1 file changed, 51 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/CardPerfil.svelte b/src/lib/components/CardPerfil.svelte
index a766b77..432c38e 100644
--- a/src/lib/components/CardPerfil.svelte
+++ b/src/lib/components/CardPerfil.svelte
@@ -17,6 +17,9 @@
 	import Badge from './ui/badge/badge.svelte';
 	import { resolve } from '$app/paths';
 	import { goto } from '$app/navigation';
+	import { Tooltip } from './ui/tooltip';
+	import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
+	import TooltipContent from './ui/tooltip/tooltip-content.svelte';
 
 	let { data = $bindable() } = $props();
 
@@ -151,14 +154,30 @@
 							<div class="flex items-center justify-between">
 								<div class="flex -space-x-2">
 									{#each data.seguidos.response as seguidos (seguidos.id)}
-										<a href={resolve('/[perfil]', { perfil: seguidos.username })}>
-											<Avatar class="h-8 w-8 border-2 border-background">
-												<AvatarImage src={seguidos.imageUrl} alt={seguidos.username} />
-												<AvatarFallback class="text-xs">
-													{seguidos.displayName?.[0] || ''}
-												</AvatarFallback>
-											</Avatar>
-										</a>
+										<Tooltip>
+											<TooltipTrigger>
+												<a href={resolve('/[perfil]', { perfil: seguidos.username })}>
+													<Avatar class="h-8 w-8 border-2 border-background">
+														<AvatarImage src={seguidos.imageUrl} alt={seguidos.username} />
+														<AvatarFallback class="text-xs">
+															{seguidos.displayName?.[0] || ''}
+														</AvatarFallback>
+													</Avatar>
+												</a>
+											</TooltipTrigger>
+											<TooltipContent>
+												<span class="flex items-center gap-2">
+													<Avatar class="h-8 w-8 border-2 border-background">
+														<AvatarImage src={seguidos.imageUrl} alt={seguidos.username} />
+														<AvatarFallback class="text-xs">
+															{seguidos.displayName?.[0] || ''}
+														</AvatarFallback>
+													</Avatar>
+													<span class="text-lg">{seguidos.displayName}</span>
+													<span class="text-lg text-muted-foreground">@{seguidos.username}</span>
+												</span>
+											</TooltipContent>
+										</Tooltip>
 									{/each}
 								</div>
 								{#if data.seguidos.response?.length < data.countSeguidos}
@@ -188,14 +207,30 @@
 							<div class="flex items-center justify-between">
 								<div class="flex -space-x-2">
 									{#each data.seguidores.response as seguidores (seguidores.id)}
-										<a href={resolve('/[perfil]', { perfil: seguidores.username })}>
-											<Avatar class="h-8 w-8 border-2 border-background">
-												<AvatarImage src={seguidores.imageUrl} alt={seguidores.username} />
-												<AvatarFallback class="text-xs">
-													{seguidores.displayName?.[0] || ''}
-												</AvatarFallback>
-											</Avatar>
-										</a>
+										<Tooltip>
+											<TooltipTrigger>
+												<a href={resolve('/[perfil]', { perfil: seguidores.username })}>
+													<Avatar class="h-8 w-8 border-2 border-background">
+														<AvatarImage src={seguidores.imageUrl} alt={seguidores.username} />
+														<AvatarFallback class="text-xs">
+															{seguidores.displayName?.[0] || ''}
+														</AvatarFallback>
+													</Avatar>
+												</a>
+											</TooltipTrigger>
+											<TooltipContent>
+												<span class="flex items-center gap-2">
+													<Avatar class="h-8 w-8 border-2 border-background">
+														<AvatarImage src={seguidores.imageUrl} alt={seguidores.username} />
+														<AvatarFallback class="text-xs">
+															{seguidores.displayName?.[0] || ''}
+														</AvatarFallback>
+													</Avatar>
+													<span class="text-lg">{seguidores.displayName}</span>
+													<span class="text-lg text-muted-foreground">@{seguidores.username}</span>
+												</span>
+											</TooltipContent>
+										</Tooltip>
 									{/each}
 								</div>
 								{#if data.seguidores.response?.length < data.countSeguidores}