tutoriais mais recente desenvolvimento web
 

Bootstrap Plugin tooltip


A dica Plugin

O plugin Tooltip é pequena caixa de pop-up que aparece quando o usuário move o ponteiro do mouse sobre um elemento:

pairar sobre mim

Dica: Plugins podem ser incluídos individualmente (usando Bootstrap's individuais "tooltip.js" arquivo), 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 a data-toggle="tooltip" atributo para um elemento.

Use o title atributo para especificar o texto que deve ser exibido dentro da dica:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Nota: As descrições devem ser inicializados com jQuery: selecione o elemento específico e chamar a tooltip() método.

O código a seguir permitirá a todas as dicas de ferramentas no documento:

Exemplo

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
Tente você mesmo "

posicionamento Tooltips

Por padrão, a dica de ferramenta aparece na parte superior do elemento.

Use a data-placement atributo para definir a posição da dica de ferramenta na parte superior, inferior, esquerdo ou do lado direito 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>
Tente você mesmo "

Dica: Você também pode usar o data-placement atributo com um valor de "auto", que permitirá que o navegador decidir a posição da dica. Por exemplo, se o valor for "auto left" , a dica de ferramenta será exibido no lado esquerdo quando possível, caso contrário, à direita.


Conclua Bootstrap Tooltip Referência

Para uma referência completa de todos os dica opções, métodos e eventos, ir ao nosso Bootstrap JS Tooltip Referência .