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!