N
Nuxt•3mo ago
lixs

Nuxt UI AvatarGroup Tooltip

Hi, we are using v4 with an avatarGroup tooltip 
          <UAvatarGroup
            v-if="sharedUsers.length"
            :max="3"
            size="sm"
            @click="isShareProjectModalOpen = true"
          >
            <UTooltip
              v-for="user in sharedUsers"
              :key="user.emailAddress"
              :text="user.fullName ?? user.emailAddress"
              :delay-duration="0"
            >
              <UAvatar
                :src="user.avatar ?? undefined"
                :alt="user.fullName ?? user.emailAddress"
              />
            </UTooltip>
          </UAvatarGroup>
          <UAvatarGroup
            v-if="sharedUsers.length"
            :max="3"
            size="sm"
            @click="isShareProjectModalOpen = true"
          >
            <UTooltip
              v-for="user in sharedUsers"
              :key="user.emailAddress"
              :text="user.fullName ?? user.emailAddress"
              :delay-duration="0"
            >
              <UAvatar
                :src="user.avatar ?? undefined"
                :alt="user.fullName ?? user.emailAddress"
              />
            </UTooltip>
          </UAvatarGroup>
We have few modal opening on the same page however we have inconsistency with the tooltip when playing around opening UModal on the page the tooltip would stop working. has anyone encounter such issue?
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @lixs. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about issues with tooltips in a UAvatarGroup when opening and closing UModal components in Nuxt UI v4. The documentation does show that wrapping avatars in tooltips within UAvatarGroup is a supported pattern, and that tooltips rely on the global TooltipProvider via the UApp component for correct behavior. It also notes that modals and overlays are now managed programmatically and globally through the UApp component and useOverlay composable, replacing older global modal components AvatarGroup Usage Tooltip Usage App Component Migration Guide. However, there is no mention of a known bug or workaround for tooltips becoming unresponsive after opening modals. If you are experiencing this issue, it may be related to focus management, overlay stacking, or a bug in the current version. The documentation recommends ensuring your app is wrapped in the UApp component, as this provides the necessary providers for overlays and tooltips. If the problem persists, you may want to: - Double-check that your app is wrapped in <UApp> at the root. - Ensure you are using the latest version of Nuxt UI. - Consider opening an issue on the Nuxt UI GitHub repository with a minimal reproduction. Again, the knowledge sources do not provide a direct answer or workaround for this specific tooltip/modal interaction issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@787995685873778689> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?