Skip to content

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

Open
@newarifrh

Description

@newarifrh

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

Activity

changed the title [-]Tooltip is not centered when wrapping avatar[/-] [+]Tooltip is not centered when wrapping avatar inside avatar group[/+] on Jan 14, 2024
added this to the 1.0.0 milestone on Jan 14, 2024
tulup-conner

tulup-conner commented on Jan 14, 2024

@tulup-conner
Collaborator

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

newarifrh

newarifrh commented on Jan 14, 2024

@newarifrh
ContributorAuthor

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

newarifrh commented on Jan 14, 2024

@newarifrh
ContributorAuthor

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

added a commit that references this issue on Jan 15, 2024
13bc624
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐛 bugSomething isn't workingconfirmedThis bug was confirmed

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

      Participants

      @newarifrh@tulup-conner

      Issue actions

        Tooltip is not centered when wrapping avatar inside avatar group · Issue #1231 · themesberg/flowbite-react