N
Nuxt•4mo ago
Turboman3000

can i add a line warp to a tooltip

hi, can i somehow add a line wrap / line break between longer sentences on a tooltip. i've tried adding some \n and <b /> to the string but it doesn't work
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @Turboman3000. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The Nuxt UI Tooltip component’s text prop is intended for plain text only, so adding \n or HTML tags like <br /> will not create line breaks or formatting—they will be rendered as literal text or ignored. This is why your attempts with \n and <br /> did not work. If you need line breaks or more complex formatting in a tooltip, you should use the content prop instead of text. The content prop allows you to control how the tooltip content is rendered, including alignment, side, and offset, but the documentation does not explicitly state that it supports HTML or Vue components directly. However, you can pass an object to content to customize its behavior, but for rich content, you may need to use a slot or a custom tooltip implementation. Here’s how you would use the content prop for basic configuration: 
<template>
  <UTooltip
    :content="{
      align: 'center',
      side: 'bottom',
      sideOffset: 8
    }"
    text="First line\nSecond line"
  >
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>
<template>
  <UTooltip
    :content="{
      align: 'center',
      side: 'bottom',
      sideOffset: 8
    }"
    text="First line\nSecond line"
  >
    <UButton label="Open" color="neutral" variant="subtle" />
  </UTooltip>
</template>
However, as per the documentation, the text prop will not interpret \n as a line break. If you need true multi-line or formatted content, you may need to check if the component supports a default slot for custom content, but the knowledge sources do not explicitly confirm this capability for Nuxt UI Tooltip. If you require this, you may need to look for updates in the official documentation or consider a workaround such as using multiple tooltips or a custom component for advanced formattingTooltip Usage. Summary:
- text prop does not support line breaks or HTML. - content prop allows configuration but not arbitrary HTML. - For advanced formatting, check for slot support or use a custom tooltip. If you need further customization, please refer to the latest Tooltip documentation for updates. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@262572967358234634> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?