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 Resposta
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>
-
É 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
jquery.validate