Open
Description
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.
Expected behavior
Tooltip should be centered when wrapping avatar inside avatar group, like another component.
For example tooltip wrapping button:
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.
- I have searched the Issues to see if this bug has already been reportedI have tested the latest version
Activity
[-]Tooltip is not centered when wrapping avatar[/-][+]Tooltip is not centered when wrapping avatar inside avatar group[/+]tulup-conner commentedon Jan 14, 2024
Thanks, this issue is happening with Tooltip in a few different contexts actually
newarifrh commentedon Jan 14, 2024
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.
newarifrh commentedon Jan 14, 2024
I got solution, because "@floating-ui/react" doesn't calculate the margin, we make component adjustments to the parent (avatar group) and child (avatar).
fix(avatar): makes the tooltip centered when wrapping an avatar insid…