#Tooltip in a link wrapping an Avatar

7 messages · Page 1 of 1 (latest)

quartz hawk
#

Hi! I've tried all combinations possible to make this work, but I'm still getting halfs of what I want.

Basically I want a group of avatars that works as individual links, each with it's name in a tooltip.

<Tooltip.Group openDelay={300} closeDelay={100}>
      <Avatar.Group spacing={spacing}>
        {userList.map((user, i) => {
          return (
            <Tooltip key={i} label={user.userName} withArrow>
            <Link
              prefetch={false}
              href={`/p/${user.userName}`}
              passHref
            />
                <Avatar size={size} radius="xl" component="a">
                  <Image
                    src={user.avatar ?? ''}
                    alt={`${user.userName}_avatar`}
                    width={75}
                    height={75}
                  />
                </Avatar>
            </Link>
            </Tooltip>
          );
        })}
   </Avatar.Group>
</Tooltip.Group>

I've switch the Link with the tooltip, tooltip inside the Avatar... And nothing.

I want to see the tooltip and still be able to see the cursor as a pointer, and be able to middle click to open a new tab, see the link in the corner of the browser as I hover the link...

Any suggestion? Thanks!

steep pagoda
quartz hawk
#

Im using:

  • "next": "12.3.4",
  • "@mantine/core": "^6.0.1",
steep pagoda
quartz hawk
#

No, it doesn't show the tooltip nor the link behaviour... If you click it takes you to the url but ther's no indication that's a link

#

Wait, it is working now!! Thanks! I refreshed the dev build and now is working!

#

You are awesome!!! I can't tell you how fast and easy Mantine is helping me to finish my project.