N
Nuxt3mo ago
Viridian

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.
No description
3 Replies
Viridian
ViridianOP3mo ago
I managed to fix it slightly, but now the words of my span tag won't wrap
No description
Antonio Ivanov
Antonio Ivanov3mo ago
Hi, try adding this to the tooltip class :ui="{ base: 'h-fit overflow-visible whitespace-normal' }"
Viridian
ViridianOP3mo ago
That works, you're a legend @Antonio Ivanov 🙏
Want results from more Discord servers?
Add your server