q-tooltip background color

javierabadia

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!

a47ae

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>

No More Posting New Topics!

q-tooltip background color