1

O usuário de meu sistema, usa notebook e os inputs, não de um formulário mas de filtro, não aparecem 100% na tela dele, mas é normal, é responsivo até certo ponto o projeto que peguei já andando.

Bom: como inserir Tooltip em campos do tipo input e select usando Vue.js com Quasar Framework.

Em botões é simples, basta utilizar:

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

Baseado neste exemplo: https://codepen.io/pen/?&editable=true&editors=101

Mas não vi como fazer no Input ou Select. Já tentei da mesma forma de botões mas não consigo.

PS: Os inputs e selects são de filtros e já vêm com dados padrões. O usuário quer passar o mouse em cima e ver o que se trata quando a tela está menor.

A tela em tamanho normal:

inserir a descrição da imagem aqui

A tela no cliente:

inserir a descrição da imagem aqui

Sei que é frescura, mas cliente é cliente....

Agradeço!

1
  • Seu link do codepen não funciona
    – hugocsl
    23/09/2019 às 15:58

1 Resposta 1

1

Cara eu testei aqui e funcionou. Acredito que não é necessário mas primeiro confira se vc incluiu o componente de Tootltip (components: ['QTooltip']) no quasar.conf.js

Tenho esse resultado

inserir a descrição da imagem aqui

A estrutura que eu montei aqui é essa

    <q-input outline dense debounce="300" v-model="filter" placeholder="Pesquisar">
        <q-tooltip
            anchor="center middle"
            self="center middle"
        >Clique para editar
    </q-input>
5
  • você utilizou em um ícone. Em ícone dá certo. Em um input sem ícones ou botões não dá certo desta forma.
    – Ramos
    23/09/2019 às 16:47
  • 1
    @Ramos olha edição que fiz na resposta, tirei ícone e coloquei o tooltipe dentro do <q-input > e funcionou normalmente.
    – hugocsl
    23/09/2019 às 16:55
  • Deu certo, funcionou. Obrigado @hugocsl
    – Ramos
    23/09/2019 às 17:04
  • 1
    @Ramos legal que funcionou ai. Só repare no Gif, que o Tooltip acaba encubrindo o texto... Isso prejudica bastante a UX, minha indicação é não usar dessa forma... vc pode mudar o posicionamento do tooltipe consultando a documentação quasar.dev/vue-components/tooltip
    – hugocsl
    23/09/2019 às 17:10
  • 1
    Deu muito certo. Valeu mesmo!
    – Ramos
    23/09/2019 às 17:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .