Support Tooltip Within AvatarGroup

🚀 Feature request

Support Tooltip Within AvatarGroup

<AvatarGroup size="md" max={2}>
  <Tooltip label="Christian Nwamba">
    <Avatar name="Christian Nwamba" />
  </Tooltip>
  <Tooltip label="Ryan Florence">
    <Avatar name="Ryan Florence" />
  </Tooltip>
  <Tooltip label="Segun Adebayo">
    <Avatar name="Segun Adebayo" />
  </Tooltip>
  <Tooltip label="Kent Dodds">
    <Avatar name="Kent Dodds" />
  </Tooltip>
  <Tooltip label="Prosper Otemuyiwa">
    <Avatar name="Prosper Otemuyiwa" />
  </Tooltip>
</AvatarGroup>

🧱 Problem Statement / Justification

when using Avatar with initials only you would want to display the user full name. one way to do it is using Tooltip but it’s currently broken.

you won’t get avatars overlapping. before: after:

✅ Proposed solution or API

one way to fix the problem is using deep mapping in avatar group children mapping using react-children-utilities

↩️ Alternatives

another option is passing styles from avatar group to avatar using context

WDYT? any other suggestions?

[santialbo]

I had a similar problem, my workaround was to create my own TooltipAvatar component and pass the properties to the inner Avatar element.

See codesandbox https://codesandbox.io/s/quiet-hooks-gefoy?file=/src/App.tsx

[Akifcan]

 <AvatarGroup size='md' max={5} position='relative' paddingBlock={3}>
            {employees.length > 0 &&
              employees?.map((employee: IEmployee, i: number) => (
                <Tooltip key={employee.id} label={employee.name} textTransform='capitalize'>
                  <Avatar position='absolute' left={i * 7} bg='white' name={employee.name} src={employee.path}></Avatar>
                </Tooltip>
              ))}
          </AvatarGroup>