themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.78k stars 396 forks source link

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

Open newarifrh opened 6 months ago

newarifrh commented 6 months ago

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


tulup-conner commented 6 months ago

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

newarifrh commented 6 months ago

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 commented 6 months ago

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