Nuxt•4mo ago

Expand tooltip content (NuxtUI)

Is there a way to increase the space a tooltip can use to display content? I'm currently doing this:

<UTooltip>
                            <template #text>
                              <div class="flex flex-col gap-y-1">
                                <span class="font-bold">{{ getAugmentData(findParticipant(smnr.summoner.id,
                                  match)!.playerAugment1).name }}</span>
                                <span class="font-italics">{{ getAugmentData(findParticipant(smnr.summoner.id,
                                  match)!.playerAugment1).tooltip }}</span>
                              </div>
                            </template>
                            <UAvatar size="md"
                              :src="getAugmentData(findParticipant(smnr.summoner.id, match)!.playerAugment1).iconPath" />
                          </UTooltip>

<UTooltip>
                            <template #text>
                              <div class="flex flex-col gap-y-1">
                                <span class="font-bold">{{ getAugmentData(findParticipant(smnr.summoner.id,
                                  match)!.playerAugment1).name }}</span>
                                <span class="font-italics">{{ getAugmentData(findParticipant(smnr.summoner.id,
                                  match)!.playerAugment1).tooltip }}</span>
                              </div>
                            </template>
                            <UAvatar size="md"
                              :src="getAugmentData(findParticipant(smnr.summoner.id, match)!.playerAugment1).iconPath" />
                          </UTooltip>

But the second span isn't showing at all. Are there any props I can edit to achieve what I want? I can confirm that there is indeed data in the .tooltip property, but I assume that the tooltip has a fixed height to display text.

3 Replies

ViridianOP•4mo ago

I managed to fix it slightly, but now the words of my span tag won't wrap

Antonio Ivanov•4mo ago

Hi, try adding this to the tooltip class :ui="{ base: 'h-fit overflow-visible whitespace-normal' }"

ViridianOP•4mo ago

That works, you're a legend @Antonio Ivanov 🙏

Gaming

Programming

Expand tooltip content (NuxtUI)