Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tooltip is not centered when wrapping avatar inside avatar group #1231

Open
2 tasks done
newarifrh opened this issue Jan 14, 2024 · 3 comments · May be fixed by #1232
Open
2 tasks done

Tooltip is not centered when wrapping avatar inside avatar group #1231

newarifrh opened this issue Jan 14, 2024 · 3 comments · May be fixed by #1232
Labels
🐛 bug Something isn't working confirmed This bug was confirmed
Milestone
1.0.0

Comments

@newarifrh
Copy link
Contributor

newarifrh commented Jan 14, 2024 •
edited

Steps to reproduce

package.json

"flowbite": "^2.2.0",
"flowbite-react": "^0.7.2",

<Avatar.Group>
  <Tooltip content="Tooltip content" trigger="click">
    <Avatar size="xs" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded stacked />
  </Tooltip>
</Avatar.Group>

Current behavior

Tooltip is not centered when wrapping avatar inside avatar group.

Screenshot 2024-01-14 at 18 48 39

Expected behavior

Tooltip should be centered when wrapping avatar inside avatar group, like another component.
For example tooltip wrapping button:

Screenshot 2024-01-14 at 19 03 23

Context

This problem only appears when the tooltip wraps around an avatar inside avatar group. For avatars without wrapping avatar group, there is no problem.

Screenshot 2024-01-14 at 19 27 16

  • I have searched the Issues to see if this bug has already been reported
  • I have tested the latest version
@newarifrh newarifrh changed the title Tooltip is not centered when wrapping avatar Tooltip is not centered when wrapping avatar inside avatar group Jan 14, 2024
@tulup-conner tulup-conner added 🐛 bug Something isn't working confirmed This bug was confirmed labels Jan 14, 2024
@tulup-conner tulup-conner added this to the 1.0.0 milestone Jan 14, 2024
@tulup-conner
Copy link
Collaborator

Thanks, this issue is happening with Tooltip in a few different contexts actually

@newarifrh
Copy link
Contributor Author

I just found a problem because "-space-x-{n}" in the parent is not included in the calculations for floating components.
And then I've tried natively for "@floating-ui/react", but it doesn't work well.

Screenshot 2024-01-15 at 07 27 32

@newarifrh
Copy link
Contributor Author

I got solution, because "@floating-ui/react" doesn't calculate the margin, we make component adjustments to the parent (avatar group) and child (avatar).

Screenshot 2024-01-15 at 07 40 12

newarifrh added a commit to newarifrh/flowbite-react that referenced this issue Jan 15, 2024
@newarifrh
fix(avatar): makes the tooltip centered when wrapping an avatar insid…
13bc624 
…e an avatar group

fix themesberg#1231
@newarifrh newarifrh linked a pull request Jan 15, 2024 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 bug Something isn't working confirmed This bug was confirmed
Projects
None yet
Milestone
1.0.0
Development

Successfully merging a pull request may close this issue.

Fix the tooltip centered when wrapping an avatar inside an avatar group newarifrh/flowbite-react
2 participants
@newarifrh @tulup-conner