Support Tooltip Within AvatarGroup
See original GitHub issue🚀 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?
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:5 (1 by maintainers)
Top Results From Across the Web
How can I add a ToolTip to the AvatarGroup "+x" bubble
I was wondering if there is a way to add a ToolTip component to the bubble showing the additional avatars in the ...
Read more >AvatarGroup API - Material UI - MUI
API reference docs for the React AvatarGroup component. Learn about the props, CSS, and other APIs of this exported module.
Read more >Tooltip - Examples - Components - Atlassian Design System
A tooltip is a floating, non-actionable label used to explain a user interface ... In addition, the title attribute is not supported consistently...
Read more >Avatar Group | Vuexy React Admin Template - Pixinvent
Use title to add Tooltips to avatar group. import avatar5 from '@src/assets/images/portrait/small/avatar-s-5.jpg'. const data = [.
Read more >React Avatar Component - PrimeFaces
import { Avatar } from 'primereact/avatar'; import { AvatarGroup } from ... Avatar has three built-in display modes; "label", "icon" and "image".
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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