1

Boa tarde pessoal! Eu estou fazendo um formulário informativo com o Framework Bootstrap, onde em alguns campos deverão aparecer um balãozinho informativo em cima do campo (tipo um balão de diálogo), informando ao usuário como ele deve preencher o campo. Mais só que eu não faço a menor ideia de como isso é feito. Alguém pode me ajudar?

1
  • 1
    de uma pesquisada sobre jquery.validate Commented 30/01/2015 às 16:09

1 Resposta 1

4

Você pode utilizar o próprio bootstrap com o recurso de tooltips.

Documentação: ToolTips

Você só precisa aplicar os atributos data-toggle na tag input com o valor tooltip, um data-placement que é a posição do tooltip (top, bottom, left, right), um data-trigger que é como o tooltip é acionado (focus, hover, etc) e definir um title que é o texto que será exibido no tooltip.

OBS: Tudo isso é explicado detalhadamente na documentação.

Exemplo:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="container">
    <div class="row">
        <div class="col-md-10">
            <label for="name">Seu nome:</label>
            <input id="name" class="form-control" type="text" data-toggle="tooltip" data-trigger="hover" data-placement="bottom" title="Minha dica legal" />
        </div>
    </div>
</div>

1
  • É exatamente isto que eu estava procurando @Learne, modifiquei o meu html aqui e funcionou perfeitamente, muito obrigado pela força! Abraço. Commented 30/01/2015 às 16:38

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 .