From f8b9f7c6660d60da4a0ca82d9f33a8d5d26896d1 Mon Sep 17 00:00:00 2001
From: Mathu-lmn <80094438+Mathu-lmn@users.noreply.github.com>
Date: Mon, 1 Sep 2025 21:30:44 +0200
Subject: [PATCH 1/2] feat(AvatarGroup): add a new "moreTooltip" prop

---
 src/runtime/components/AvatarGroup.vue | 32 +++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/AvatarGroup.vue b/src/runtime/components/AvatarGroup.vue
index fbae318c40..49b26d7c99 100644
--- a/src/runtime/components/AvatarGroup.vue
+++ b/src/runtime/components/AvatarGroup.vue
@@ -19,6 +19,14 @@ export interface AvatarGroupProps {
    * The maximum number of avatars to display.
    */
   max?: number | string
+  /**
+   * Tooltip text for the overflow "+N" avatar.
+   * Can be a static string or a function receiving the hidden count and returning a string.
+   * Example:
+   * - "3 more attendees"
+   * - (n) => `${n} more attendees`
+   */
+  moreTooltip?: string | ((count: number) => string)
   class?: any
   ui?: AvatarGroup['slots']
 }
@@ -35,6 +43,7 @@ import { useAppConfig } from '#imports'
 import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
 import { tv } from '../utils/tv'
 import UAvatar from './Avatar.vue'
+import UTooltip from './Tooltip.vue'
 
 const props = defineProps<AvatarGroupProps>()
 const slots = defineSlots<AvatarGroupSlots>()
@@ -87,6 +96,17 @@ const hiddenCount = computed(() => {
   return children.value.length - visibleAvatars.value.length
 })
 
+const moreTooltipText = computed<string | undefined>(() => {
+  if (!hiddenCount.value) {
+    return undefined
+  }
+  const t = props.moreTooltip
+  if (!t) {
+    return undefined
+  }
+  return typeof t === 'function' ? t(hiddenCount.value) : t
+})
+
 provide(avatarGroupInjectionKey, computed(() => ({
   size: props.size
 })))
@@ -94,7 +114,17 @@ provide(avatarGroupInjectionKey, computed(() => ({
 
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
+    <template v-if="hiddenCount > 0">
+      <UTooltip v-if="moreTooltipText" :text="moreTooltipText">
+        <UAvatar :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
+      </UTooltip>
+      <UAvatar
+        v-else
+        :text="`+${hiddenCount}`"
+        :class="ui.base({ class: props.ui?.base })"
+      />
+    </template>
+
     <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>
 </template>

From 0cdb83c751773347e11374c94f9f78a346876530 Mon Sep 17 00:00:00 2001
From: Mathu-lmn <80094438+Mathu-lmn@users.noreply.github.com>
Date: Mon, 1 Sep 2025 21:31:30 +0200
Subject: [PATCH 2/2] tweak(docs/playground): update documentation and
 playground example with AvatarGroup new "moreTooltip" prop

---
 docs/content/3.components/avatar-group.md  | 27 +++++++++++++++++++++-
 playground/app/pages/components/avatar.vue |  2 +-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/docs/content/3.components/avatar-group.md b/docs/content/3.components/avatar-group.md
index 9e5017dda0..5c51a3a85f 100644
--- a/docs/content/3.components/avatar-group.md
+++ b/docs/content/3.components/avatar-group.md
@@ -69,9 +69,34 @@ slots:
 :u-avatar{src="https://github.com/noook.png" alt="Neil Richter"}
 ::
 
+### More tooltip
+
+Wrap the overflow avatar with a [Tooltip](/components/tooltip) to display a tooltip on hover.
+You can either use a static string or a function that receives the hidden count and returns a string.
+
+::component-code
+---
+prettier: true
+hide:
+  max
+props:
+  max: 2
+  more-tooltip: "Neil Richter"
+slots:
+  default: |
+
+    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
+    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
+---
+:u-avatar{src="https://github.com/benjamincanac.png" alt="Benjamin Canac"}
+:u-avatar{src="https://github.com/romhml.png" alt="Romain Hamel"}
+:u-avatar{src="https://github.com/noook.png" alt="Neil Richter"}
+::
+
 ## Examples
 
-### With tooltip
+### With avatar tooltip
 
 Wrap each avatar with a [Tooltip](/components/tooltip) to display a tooltip on hover.
 
diff --git a/playground/app/pages/components/avatar.vue b/playground/app/pages/components/avatar.vue
index bd172e52a3..b6a50fb35f 100644
--- a/playground/app/pages/components/avatar.vue
+++ b/playground/app/pages/components/avatar.vue
@@ -29,7 +29,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
       </UAvatarGroup>
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatarGroup v-for="size in sizes" :key="size" :size="size" :max="4">
+      <UAvatarGroup v-for="size in sizes" :key="size" :size="size" :max="2" :more-tooltip="(count) => `${count} more attendees`">
         <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
         <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
         <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />