q-tooltip background color



  • Hi,

    (working with v0.13.4)

    Is there a way to style q-tooltips? I’d like to change the background color and font-size

    <q-tooltip class=“bg-primary”>
    my tooltip text here
    </q-tooltip>

    doesn’t work, because the span.q-tooltip element doesn’t get the ‘bg-primary’ class once inserted as a child of the <body>

    Thanks!



  • The global tooltip background color can be set via the $tooltip-background Stylus variable.
    Also, I think tooltips just place whatever you pass between them as slots, so you should be able to just style it yourself.

    <template>
      <q-btn>
        Button
        <q-tooltip>
         <div class="my-tooltip-content"></div>
        </q-tooltip>
      </q-btn>
    </template>
    
    <style>
      .my-tooltip-content {
        font-size: 2rem;
      }
    </style>
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.