No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Line break in Q-tooltip?

    Help
    3
    5
    2128
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Q
      quasy last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

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

        Scott

        Q 1 Reply Last reply Reply Quote 0
        • Q
          quasy @s.molinari last edited by

          @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 1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel @quasy last edited by dobbel

            @quasy

            this works with <br> in hovertext:

            <q-tooltip 
                      content-class="bg-indigo"
                      :offset="[10, 10]"
                    >
                     <div v-html="hoverText"></div> 
            </q-tooltip>
            
            
            1 Reply Last reply Reply Quote 2
            • Q
              quasy last edited by

              @dobbel that works!! Thanks so much!

              1 Reply Last reply Reply Quote 0
              • First post
                Last post