Tooltips
Para mostrar balões de informação.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, veritatis, accusantium, omnis, doloribus at vitae perspiciatis ducimus dolore velit ut ea nisi adipisci quo debitis odit nemo illo doloremque quae!
consectetur
Em todas as direções
Use o atributo data-placement para definir a direção do tooltip.
HTML
Hover over meSome tooltip text!
Como usar
Utilize esse formato de Javascript.
$('#exemplo').tooltip(options)
Opções
As opções podem ser passadas através de atributos dentro do HTML, acrescentando a opção data-, como em data-animation="".
| Nome | tipo | padrão | descrição |
|---|---|---|---|
| animation | boolean | True | aplica um CSS fade transition no tooltip. |
| html | boolean | false | Insere HTML dentro do tooltip, se falso, o JQuey vai inserir um texto no conteúdo do DOM. |
| placement | string | function | 'top' |
como posicionar o tooltip - top | bottom | left | right | auto.
Quando "auto" é especificado, o tooltip será reorientado dinamicamente. Por exemplo, se o placement é "auto left", o tooltip será exibido à esquerda quando possível, caso contrário, ele será exibido na direita. |
| selector | string | false | se um objeto é fornecido, o objeto tooltip será delegado as metas especifícadas. |
| title | string | function | '' | valor padrão, se não houver title, o tooltip não estará presente. |
| trigger | string | 'hover focus' | como o tooltip é acionado - click | hover | focus | manual. Você pode passar multiplas ações, separando com espaços. |
| delay | number | object | 0 |
o delay de show (mostrar) ou hide (ocultar) o tooltip (ms) - não se aplica ao tipo de disparo manual.
Se um número é fornecido, o delay é aplicado em ambos show/hide. A estrutura do objeto é: delay: { show: 500, hide: 100 }
|
| container | string | false | false | Anexa o tooltip para um elemento específico. Exemplo: container: 'body' |
Métodos
$().tooltip(options)
Anexa um marcador para uma sequencia de elementos.
.tooltip('show')
Revela o elemento tooltip.
$('#exemplo').tooltip('show')
.tooltip('hide')
Esconde o elemento tooltip.
$('#exemplo').tooltip('hide')
.tooltip('toggle')
Alterna o elemento tooltip.
$('#exemplo').tooltip('toggle')
.tooltip('destroy')
Destrói o elemento tooltip.
$('#exemplo').tooltip('destroy')
Eventos
| Tipo de evento | Descrição |
|---|---|
| show.bs.tooltip | Este evento é acionado imediatamente quando o método de instância show é chamado. |
| shown.bs.tooltip | Este evento é disparado quando o tooltip se tornar visível ao usuário (vai esperar para transições CSS para completar). |
| hide.bs.tooltip | Este evento é acionado imediatamente quando o método de instância hide é chamada. |
| hidden.bs.tooltip | Este evento é disparado quando o tooltip terminou sendo escondidos do usuário (vai esperar para transições CSS para completar). |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// Faça algo aqui…
})