Line break in Q-tooltip?
-
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 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?
-
this works with
<br>
inhovertext
:<q-tooltip content-class="bg-indigo" :offset="[10, 10]" > <div v-html="hoverText"></div> </q-tooltip>
-
@dobbel that works!! Thanks so much!