q-tooltip component is actually using wrong font-size style.

[e274426380]

What happened?

.q-tooltip--style says font-size:10px, but the example style in the documentation actually has a font-size of 12px. In the actual application, the font-size is only 10px. 10px is very, very small, which makes the actual style completely different from the documented style.

What did you expect to happen?

I think I need to change the font-size of the .q-tooltip--style to 12px to match the actual use case in the documentation.

Reproduction URL

https://codepen.io/rstoenescu/pen/xxEvBLR

How to reproduce?

<div id="q-app">
    <span>
    here
    <q-tooltip>
     tooltips
    </q-tooltip>
  </span>
</div>

On this page you can also find the css style for font-size:10px, while the actual application style is 12px, which is contradictory

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[myleslee]

Agree. The font size is currently too small which makes people squint.

[tysongf]

You can use quasar text classes:

<q-tooltip class="text-body1">Regular Font</q-tooltip>

<q-tooltip class="text-h6">Large Font</q-tooltip>

Custom classes affecting font size need to be applied to the default slot of the q-tooltip component:

<q-tooltip>
    <template v-slot:default>
        <span class="super-big-font"> Lock Vault </span>
    </template>
</q-tooltip>