tutoriais mais recente desenvolvimento web
 

Bootstrap JS Tooltip

❮ Anterior Próxima Referência ❯

JS Tooltip (tooltip.js)

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

Para um tutorial sobre dicas de ferramentas, leia nossa Bootstrap Tooltip Tutorial .

Via data-* Atributos

A data-toggle="tooltip" ativa a dica.

O title atributo especifica o texto que deve ser exibido dentro da dica.

Exemplo

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

via JavaScript

As descrições não são plugins só de CSS, e deve, portanto, ser inicializado com jQuery: selecione o elemento especificado e chamar a tooltip() método.

Exemplo

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
Tente você mesmo "

Opções Tooltip

Opções podem ser passadas através de atributos de dados ou JavaScript. Para atributos de dados, acrescentar o nome de opção para data- , como em data-placement="" .

Nome Digitar Padrão Descrição Tente
animationbooleantrue

Especifica se deseja adicionar um efeito de transição CSS desvanece quando mostrar e ocultar a dica de ferramenta

  • true - Adicionar um efeito de desvanecimento
  • false - Não adicionar um efeito de esmaecimento
Tente
recipiente string, ou o falso booleano falso Acrescenta a dica de ferramenta para um elemento específico.
Exemplo: container: 'body' 		Tente
delaynumber, or object0 Especifica o número de milissegundos que irá tomar para mostrar e ocultar a dica de ferramenta.

Para especificar um atraso para mostrar e outra para esconder, use a estrutura do objeto:

delay: {show: 500, hide: 100} - que terá 500 ms para mostrar a tooltip , mas apenas 100 ms para escondê-lo 		Tente
htmlboolean false Especifica se a aceitar tags HTML na dica:
  • true - Aceitar tags HTML
  • false - Não aceite tags HTML
Nota: O HTML deve ser inserido no atributo do título (ou usando a opção do título).

Quando definida como false (padrão), jQuery's text() será utilizado método. Use isso se você está preocupado com ataques XSS 		Tente
placementstring"top" Especifica a posição dica. Valores possíveis:

  • "top" - Dica no topo
  • "bottom" - Dica na parte inferior
  • "left" - Dica na esquerda
  • "right" - Dica na direita
  • "auto" - Permite 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. Se o valor for "auto bottom" , a dica de ferramenta será exibida na parte inferior quando possível, caso contrário, no topo
Tente
selectorstring, or the boolean falsefalse Adiciona a dica de ferramenta para um seletor especificado Tente
templatestring  HTML de base para usar ao criar a dica de ferramenta.

O título da dica irá ser inserido no elemento com a classe .tooltip-inner e o elemento com a classe .tooltip-arrow se tornará seta da dica.

O elemento envoltório externo deve ter a .tooltip classe.
titlestring"" Especifica o texto que deve ser exibido dentro da dica Tente
triggerstring"hover focus" Especifica como a dica de ferramenta é acionada. Valores possíveis:

  • "click" - Acionar a dica de ferramenta com um clique
  • "hover" - Acionar a dica de ferramenta em foco
  • "focus" - Acionar a dica de ferramenta quando se obtém o foco (por tabulação ou clicando .eg)
  • "manual" - Acionar a dica de ferramenta manualmente
Dica: Para passar vários valores, separe-os com um espaço 		Tente
viewportstring, or object{selector: "body", padding: 0} Mantém a dica de ferramenta dentro dos limites deste elemento.

Exemplo: viewport: '#viewport' ou {selector: '#viewport', padding: 0}

Métodos Tooltip

A tabela a seguir lista os métodos dica todos disponíveis.

Método Descrição Tente
.tooltip( options ) Ativa a dica de ferramenta com uma opção. Veja opções acima para valores válidos Tente
.tooltip("show") Mostra a dica de ferramenta Tente
.tooltip("hide") Oculta a dica de ferramenta Tente
.tooltip("toggle") Alterna a dica de ferramenta Tente
.tooltip("destroy") Esconde e destrói a dica de ferramenta Tente

Eventos Tooltip

A tabela a seguir lista os eventos dica todos disponíveis.

Evento Descrição Tente
show.bs.tooltip Ocorre quando a dica de ferramenta está prestes a ser mostrado Tente
shown.bs.tooltip Ocorre quando a dica de ferramenta é totalmente mostrado (após transições CSS foram concluídas) Tente
hide.bs.tooltip Ocorre quando a dica de ferramenta está prestes a ser escondido Tente
hidden.bs.tooltip Ocorre quando a dica de ferramenta está totalmente oculto (após transições CSS foram concluídas) Tente
Exemplos

Exemplos

Projeto Dica Personalizado

Use CSS para personalizar a aparência do dica:

Exemplo

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
Tente você mesmo "

❮ Anterior Próxima Referência ❯