diff --git a/app/components/CommentReactions.vue b/app/components/CommentReactions.vue
index 96e0cc1..80abe11 100644
--- a/app/components/CommentReactions.vue
+++ b/app/components/CommentReactions.vue
@@ -70,7 +70,12 @@ async function pick(emoji: string) {
           <span class="text-sm font-medium tabular-nums" :class="r.me ? 'text-foreground' : 'text-muted-foreground'">{{ r.count }}</span>
         </button>
       </TooltipTrigger>
-      <TooltipContent>{{ r.names.join(', ') }}</TooltipContent>
+      <TooltipContent class="flex items-center gap-2.5 px-3 py-2">
+        <span class="text-5xl leading-none">{{ r.emoji }}</span>
+        <span class="flex flex-col leading-snug">
+          <span v-for="n in r.names" :key="n">{{ n }}</span>
+        </span>
+      </TooltipContent>
     </Tooltip>
   </div>
 </template>
diff --git a/app/components/UploadReactions.vue b/app/components/UploadReactions.vue
index f41f420..e6eccab 100644
--- a/app/components/UploadReactions.vue
+++ b/app/components/UploadReactions.vue
@@ -73,7 +73,12 @@ async function pick(emoji: string) {
           <span class="text-sm font-medium tabular-nums" :class="r.me ? 'text-foreground' : 'text-muted-foreground'">{{ r.count }}</span>
         </button>
       </TooltipTrigger>
-      <TooltipContent>{{ r.names.join(', ') }}</TooltipContent>
+      <TooltipContent class="flex items-center gap-2.5 px-3 py-2">
+        <span class="text-5xl leading-none">{{ r.emoji }}</span>
+        <span class="flex flex-col leading-snug">
+          <span v-for="n in r.names" :key="n">{{ n }}</span>
+        </span>
+      </TooltipContent>
     </Tooltip>
   </div>
 </template>