Dica do Bootstrap 4
Dica do Bootstrap 4
O componente Tooltip é uma pequena caixa pop-up que aparece quando o usuário move o ponteiro do mouse sobre um elemento:
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>
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 .