How to insert a Tooltip into an input field

Question

The user of my system, uses notebook and inputs, not of a form but of filter, do not appear 100% on the screen of it, but it is normal, is responsive to some extent the project I have already walked walking.

Good: how to insert Tooltip into input and select fields using Vue.js with Quasar Framework.

On buttons is simple, just use:

<q-btn label="Hover me" color="primary">
          <q-tooltip>
            Some text as content of Tooltip
          </q-tooltip>
        </q-btn>

Based on this example: https://codepen.io/pen/? &editable=true&editors=101

But I haven’t seen how to do it in Input or Select. I’ve tried it in the same way as buttons but I can’t.

PS: The inputs and selects are filters and already come with standard data. The user wants to hover over and see what it is when the screen is smaller.

The canvas in normal size:

The screen on the client:

I know it’s fresh, but customer is customer....

Thanks!

Answer 1

Guy I tested here and it worked. I believe it is not necessary but first check if you included the Tootltip component (components: ['QTooltip']) in the quasar.conf.js

I have that result

The structure I’ve built here is this

    <q-input outline dense debounce="300" v-model="filter" placeholder="Pesquisar">
        <q-tooltip
            anchor="center middle"
            self="center middle"
        >Clique para editar
    </q-input>