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: |
+
+
+
+
+---
+: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
-
+
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()
const slots = defineSlots()
@@ -87,6 +96,17 @@ const hiddenCount = computed(() => {
return children.value.length - visibleAvatars.value.length
})
+const moreTooltipText = computed(() => {
+ 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(() => ({
-
+
+
+
+
+
+
+