feat: add tooltip support to Avatar, AvatarGroup, and WorkspaceAvatar - #8
Open
codingwolf-at wants to merge 9 commits into
Open
feat: add tooltip support to Avatar, AvatarGroup, and WorkspaceAvatar#8codingwolf-at wants to merge 9 commits into
codingwolf-at wants to merge 9 commits into
Conversation
- Introduced a new demo for the Avatar component showcasing tooltip functionality when hovering over the avatar. - Updated Avatar component to accept a `tooltip` prop, allowing for dynamic tooltip text based on the `alt` attribute or a custom string. - Enhanced Storybook stories to include examples of the tooltip behavior, ensuring comprehensive documentation and testing of the new feature.
- Introduced a new demo component showcasing the AvatarGroup with tooltip functionality for each avatar. - Updated the AvatarGroup component to wrap avatars in a TooltipProvider, enabling shared tooltip timing when hovering over members. - Enhanced documentation to include the new demo and explain the tooltip behavior in the AvatarGroup context. - Added Storybook stories for the new tooltip interaction, ensuring comprehensive testing and demonstration of the feature.
- Introduced a `tooltip` prop to the WorkspaceAvatar component, allowing dynamic tooltip text on hover. - Updated the component to display the workspace name using a Tooltip when the `tooltip` prop is provided. - Added a new demo and Storybook stories to showcase the tooltip behavior, enhancing documentation and testing for this feature.
codingwolf-at
changed the title
Co-authored-by: Cursor <cursoragent@cursor.com>
- Enhanced tooltip logic to ensure that avatars with no `alt` attribute are treated as `aria-hidden` and do not display hover-only tooltips. - Improved code readability by restructuring the tooltipLabel assignment for clarity and maintainability.
- Adjusted the `tabIndex` property to be conditionally set based on the presence of a tooltip, ensuring that only avatars with tooltips are focusable. - Improved accessibility by maintaining focus behavior in line with tooltip functionality.
…tar components - Streamlined the logic for assigning the tooltipLabel variable, improving code readability and maintainability. - Ensured consistent handling of tooltip behavior based on the presence of the alt attribute.
codingwolf-at
marked this pull request as ready for review
August 27, 2026 12:53
anmolsinghbhatia
requested changes
Aug 27, 2026
| {...props} | ||
| render={<AvatarElement size={effectiveSize} />} | ||
| {...a11y} | ||
| tabIndex={tooltipLabel ? 0 : undefined} |
Contributor
There was a problem hiding this comment.
This overrides a consumer-provided tabIndex, even when no tooltip is shown.
Contributor
Author
There was a problem hiding this comment.
Fixed in df5147d — consumer tabIndex is forwarded when there is no tooltip; tooltip still forces 0.
| return ( | ||
| // `true` reuses `alt`; a non-empty string overrides it. Empty string / missing `alt` → no tip — | ||
| // an avatar with no `alt` is `aria-hidden`, so it must not show a hover-only tooltip either. | ||
| const tooltipLabel = alt == null ? undefined : tooltip === true ? alt : tooltip || undefined; |
Contributor
There was a problem hiding this comment.
A string tooltip is ignored when alt is missing, contrary to the documented behavior.
suggestion: Support the string independently or document that alt is required.
Contributor
Author
There was a problem hiding this comment.
Fixed in 8c14a05 — a string tooltip works without alt and becomes the accessible name.
…ponents - Updated the `tabIndex` assignment logic to allow for consumer-defined values, improving flexibility and accessibility. - Ensured that avatars with tooltips remain keyboard-focusable while maintaining the intended focus behavior for those without tooltips.
- Updated documentation to specify that a string passed to the `tooltip` prop serves as both the hover label and the accessible name, even when `alt` is omitted. - Enhanced code comments to improve understanding of accessibility handling for avatars with tooltips. - Added new Storybook stories to demonstrate tooltip functionality when using a string without an `alt` attribute.
anmolsinghbhatia
approved these changes
Aug 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds an optional
tooltipprop so Avatar, WorkspaceAvatar, and AvatarGroup members can show a person or workspace name on hover — without every call site wrappingTooltipby hand.tooltipreusesalt;tooltip="…"overrides the label.TooltipProviderso sweeping across faces swaps names without restarting the open delay.Type of Change
Screenshots and Media (if applicable)
Test Scenarios
Avatarwithtooltip(ortooltip="…") and confirm the popup shows the expected name.WorkspaceAvatar.AvatarGroup, hover one member then the next and confirm the name swaps without a long delay.tooltipstill render with no popup.