diff --git a/playground/app/pages/components/tooltip.vue b/playground/app/pages/components/tooltip.vue
index 47ea6124..f025656c 100644
--- a/playground/app/pages/components/tooltip.vue
+++ b/playground/app/pages/components/tooltip.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col gap-2">
     <UTooltip text="Top" :kbds="['meta', 'T']" :content="{ side: 'top' }" arrow>
-      <UAvatar text="T" />
+      <UButton label="Top" color="neutral" variant="outline" block />
     </UTooltip>
 
-    <div class="flex items-center gap-2 ms-[-20px]">
+    <div class="grid grid-cols-2 gap-2">
       <UTooltip text="Left" :kbds="['meta', 'L']" :content="{ side: 'left' }" arrow>
-        <UAvatar text="L" />
+        <UButton label="Left" color="neutral" variant="outline" block />
       </UTooltip>
 
       <UTooltip text="Right" :kbds="['meta', 'R']" :content="{ side: 'right' }" arrow>
-        <UAvatar text="R" />
+        <UButton label="Right" color="neutral" variant="outline" block />
       </UTooltip>
     </div>
 
     <UTooltip text="Bottom" :kbds="['meta', 'B']" arrow>
-      <UAvatar text="B" />
+      <UButton label="Bottom" color="neutral" variant="outline" block />
     </UTooltip>
   </div>
 </template>