Nuxt•17mo 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>

<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