Refactor: abstract tooltip into reusable component

src/components/Skills.astro

@@ -1,6 +1,7 @@
 ---
 import { Icon } from "astro-icon/components";
 import Section from "./ui/Section.astro";
+import Tooltip from "./ui/Tooltip.astro";
 
 const { skills } = Astro.props;
 
@@ -22,15 +23,7 @@ interface SkillProps {
             data-inline="false"
             />
 
-            <!-- Tooltip con flecha -->
-            <div class="absolute top-full left-1/2 mt-3 -translate-x-1/2 hidden group-hover:flex flex-col items-center">
-                <!-- Cuerpo del tooltip -->
-                <div class="bg-gray-800 text-white text-sm px-2 py-1 rounded shadow-lg whitespace-nowrap relative">
-                    {skill.name}
-                    <!-- Flechita -->
-                    <div class="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-gray-800 rotate-45"></div>
-                </div>
-            </div>
+            <Tooltip tooltip={skill.name} />
         </div>
         </div>
     ))}

src/components/ui/Tooltip.astro

@@ -0,0 +1,12 @@
+---
+const { tooltip } = Astro.props;
+---
+<!-- Tooltip con flecha -->
+<div class="absolute top-full left-1/2 mt-3 -translate-x-1/2 hidden group-hover:flex flex-col items-center">
+    <!-- Cuerpo del tooltip -->
+    <div class="bg-gray-800 text-white text-sm px-2 py-1 rounded shadow-lg whitespace-nowrap relative">
+        {tooltip}
+        <!-- Flechita -->
+        <div class="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-gray-800 rotate-45"></div>
+    </div>
+</div>