Plugin de dica de ferramenta de inicialização
O plug-in da dica de ferramenta
O plugin Tooltip é uma pequena caixa pop-up que aparece quando o usuário move o ponteiro do mouse sobre um elemento:
Dica: Os plug- ins podem ser incluídos individualmente (usando o arquivo "tooltip.js" individual do Bootstrap) ou todos de uma vez (usando "bootstrap.js" ou "bootstrap.min.js").
Como criar uma dica de ferramenta
Para criar uma dica de ferramenta, adicione o data-toggle="tooltip"
atributo a um elemento.
Use o titleatributo para especificar o texto que deve ser exibido dentro da dica de ferramenta:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Nota: As dicas de ferramentas devem ser inicializadas com jQuery: selecione o elemento especificado e chame o tooltip()método.
O código a seguir habilitará todas as dicas de ferramentas no documento:
Exemplo
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Dicas de posicionamento
Por padrão, a dica de ferramenta aparecerá no topo do elemento.
Use o data-placementatributo para definir a posição da dica de ferramenta na parte superior, inferior, esquerda ou direita do elemento:
Exemplo
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Dica: Você também pode usar o data-placementatributo com um valor de " auto", que permitirá que o navegador decida a posição da dica de ferramenta. Por exemplo, se o valor for " auto left", a dica de ferramenta será exibida no lado esquerdo quando possível, caso contrário, no lado direito.
Referência completa da dica de ferramenta do Bootstrap
Para obter uma referência completa de todas as opções, métodos e eventos de dicas de ferramentas, acesse nossa Referência de dicas de ferramentas do Bootstrap JS .