Line break in Q-tooltip?

[quasy]

Hi,

I have tried with v-html and replace to create a tooltip with a line break in it but can’t get it to work.

The tooltip text is coming from a function and had <br/> already included where the line breaks should go.

Thank you!

[s.molinari]

https://codepen.io/smolinari/pen/poyRaob

Scott

[quasy]

@s-molinari THANK YOU! I did not realize there was a content-style property… at the same time, it is not quite what I need.

The line breaks are already in the “hoverText” because it is a concatenated set of messages (each with a <br/> included - which renders quite well in other components).

In your codepen, it would be like having this in the script:

new Vue({
  el: '#q-app',
  data() {
    return {
      hoverText: `Yo. What's up?<br/>I'm a longer text to show someone how to get line breaks into a tool tip.`
    }
  }
})

Is this possible?

[dobbel]

@quasy

this works with <br> in hovertext:

<q-tooltip 
          content-class="bg-indigo"
          :offset="[10, 10]"
        >
         <div v-html="hoverText"></div> 
</q-tooltip>

[quasy]

@dobbel that works!! Thanks so much!