Nuxt•4w ago

Break line on UTooltip

This might be such a dumb issue but i'm unable to break line in the #text slot of the Tooltip component, more specifically in the v-else. This is my code:

<UTooltip :popper="{ placement: 'top' }">
            <template #text>
              <span
                v-if="$dayjs(row.isTrial).add(30, 'days').isBefore($dayjs())"
                >{{
                  `Expirado em: ${$dayjs(row.isTrial)
                    .add(30, "days")
                    .format("DD/MM/YYYY HH:mm")}`
                }}</span
              >
              <span v-else>
                {{
                  `Ativo em: ${$dayjs(row.isTrial).format("DD/MM/YYYY HH:mm")}`
                }}
                {{
                  `Expira em: ${$dayjs(row.isTrial)
                    .add(30, "days")
                    .format("DD/MM/YYYY HH:mm")}`
                }}
              </span>
            </template>
            <UBadge
              :label="
                row.isTrial === null
                  ? 'Não'
                  : $dayjs(row.isTrial).add(30, 'days').isBefore($dayjs())
                  ? 'Expirado'
                  : `${$dayjs(row.isTrial)
                      .add(30, 'days')
                      .diff($dayjs(), 'days')} dia(s)`
              "
              :color="
                row.isTrial === null
                  ? 'gray'
                  : $dayjs(row.isTrial).add(30, 'days').isBefore($dayjs())
                  ? 'red'
                  : 'emerald'
              "
              variant="soft"
              class="capitalize cursor-default"
            >
              <template #leading>
                <UIcon :name="'i-mingcute-calendar-2-line'" class="w-4 h-4" />
              </template>
            </UBadge>
          </UTooltip>

<UTooltip :popper="{ placement: 'top' }">
            <template #text>
              <span
                v-if="$dayjs(row.isTrial).add(30, 'days').isBefore($dayjs())"
                >{{
                  `Expirado em: ${$dayjs(row.isTrial)
                    .add(30, "days")
                    .format("DD/MM/YYYY HH:mm")}`
                }}</span
              >
              <span v-else>
                {{
                  `Ativo em: ${$dayjs(row.isTrial).format("DD/MM/YYYY HH:mm")}`
                }}
                {{
                  `Expira em: ${$dayjs(row.isTrial)
                    .add(30, "days")
                    .format("DD/MM/YYYY HH:mm")}`
                }}
              </span>
            </template>
            <UBadge
              :label="
                row.isTrial === null
                  ? 'Não'
                  : $dayjs(row.isTrial).add(30, 'days').isBefore($dayjs())
                  ? 'Expirado'
                  : `${$dayjs(row.isTrial)
                      .add(30, 'days')
                      .diff($dayjs(), 'days')} dia(s)`
              "
              :color="
                row.isTrial === null
                  ? 'gray'
                  : $dayjs(row.isTrial).add(30, 'days').isBefore($dayjs())
                  ? 'red'
                  : 'emerald'
              "
              variant="soft"
              class="capitalize cursor-default"
            >
              <template #leading>
                <UIcon :name="'i-mingcute-calendar-2-line'" class="w-4 h-4" />
              </template>
            </UBadge>
          </UTooltip>

8 Replies

kapa.ai•4w ago

Hi @Medim. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To break lines in the #text slot of the <UTooltip> component, you need to ensure that the tooltip content allows for line breaks. By default, the tooltip uses the text slot with the class truncate, which prevents line breaks and forces the content into a single line. This is defined in the theme configuration:

text: 'truncate'

text: 'truncate'

Tooltip Theme How to allow line breaks: 1. Override the ui prop for the tooltip:
You can pass a custom class to the ui.text property to remove the truncate class and allow wrapping. For example:

   <UTooltip :ui="{ text: 'whitespace-pre-line' }">
     <template #text>
       <span v-if="...">...</span>
       <span v-else>
         Ativo em: ...<br>
         Expira em: ...
       </span>
     </template>
     <!-- ... -->
   </UTooltip>

   <UTooltip :ui="{ text: 'whitespace-pre-line' }">
     <template #text>
       <span v-if="...">...</span>
       <span v-else>
         Ativo em: ...<br>
         Expira em: ...
       </span>
     </template>
     <!-- ... -->
   </UTooltip>

- Use whitespace-pre-line (or whitespace-normal) to allow line breaks and preserve them. - You can use <br> tags or template string line breaks (\n) if you use whitespace-pre-line. 2. Example with <br>:

   <UTooltip :ui="{ text: 'whitespace-pre-line' }">
     <template #text>
       <span v-if="$dayjs(row.isTrial).add(30, 'days').isBefore($dayjs())">
         {{ `Expirado em: ${$dayjs(row.isTrial).add(30, "days").format("DD/MM/YYYY HH:mm")}` }}
       </span>
       <span v-else>
         {{ `Ativo em: ${$dayjs(row.isTrial).format("DD/MM/YYYY HH:mm")}` }}<br>
         {{ `Expira em: ${$dayjs(row.isTrial).add(30, "days").format("DD/MM/YYYY HH:mm")}` }}
       </span>
     </template>
     <!-- ... -->
   </UTooltip>

   <UTooltip :ui="{ text: 'whitespace-pre-line' }">
     <template #text>
       <span v-if="$dayjs(row.isTrial).add(30, 'days').isBefore($dayjs())">
         {{ `Expirado em: ${$dayjs(row.isTrial).add(30, "days").format("DD/MM/YYYY HH:mm")}` }}
       </span>
       <span v-else>
         {{ `Ativo em: ${$dayjs(row.isTrial).format("DD/MM/YYYY HH:mm")}` }}<br>
         {{ `Expira em: ${$dayjs(row.isTrial).add(30, "days").format("DD/MM/YYYY HH:mm")}` }}
       </span>
     </template>
     <!-- ... -->
   </UTooltip>

Summary:
The default tooltip text is truncated to a single line. To allow line breaks, override the ui.text class and use whitespace-pre-line or whitespace-normal as needed. This approach is supported by the component's API and theming system Tooltip Theme. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@229706675936821249> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MedimOP•4w ago

@kapa.ai It didn't work, im using nuxt ui v2 btw.

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying that you are using Nuxt UI v2. Based on the knowledge sources provided, there is no explicit documentation or theming reference for handling line breaks in the tooltip text slot for Nuxt UI v2. The available theming and slot customization examples, as well as the Tailwind Variants system and ui prop overrides, are documented for Nuxt UI v3 and above, and the migration guide notes that the theming system has changed significantly between v2 and v3. This means that the approach for customizing tooltip content in v2 may be different or more limited compared to v3, and the specific solution for enabling line breaks in tooltip content is not covered in the provided documentation for v2. If you are able to upgrade to Nuxt UI v3, you will have more control over slot theming and can use the ui prop as described in the v3 documentation. Otherwise, for Nuxt UI v2, you may need to inspect the component source or experiment with custom CSS, but unfortunately, the knowledge sources do not provide a documented solution for this in v2. If you need to migrate, please refer to the migration guide for details, as significant changes have been made between versions, especially regarding theming and slot customization<sup>Migration Guide</sup>. I'm sorry I couldn't provide a direct solution for Nuxt UI v2 based on the available documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@229706675936821249> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MedimOP•4w ago

@kapa.ai :ui="{ base: 'h-10' }" did it.

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for your update! However, based on the knowledge sources provided, there is no explicit documentation for the :ui="{ base: 'h-10' }" prop usage with <UTooltip> in Nuxt UI v2 or v3. The available documentation for Nuxt UI v3 shows that the ui prop can be used to override slot classes (such as text, content, etc.), but does not mention a base key for the tooltip component specifically. The theming examples reference slot keys like content, arrow, text, and kbds for customization, not base Tooltip Theme. If :ui="{ base: 'h-10' }" worked for you in Nuxt UI v2, that's great, but the knowledge sources do not confirm or document this usage. If you need further customization or official support, I recommend checking the source code for your specific Nuxt UI version or consulting the official documentation for that version, as the theming and slot system differs between v2 and v3. If you have any other questions about Nuxt UI or need help with documented features, feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@229706675936821249> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Break line on UTooltip

Did you find this page helpful?