Bootstrap - Plug-in de dica de ferramenta

As dicas de ferramentas são úteis quando você precisa descrever um link. O plugin foi inspirado no plugin jQuery.tipsy escrito por Jason Frame . Desde então, as dicas de ferramentas foram atualizadas para funcionar sem imagens, animar com uma animação CSS e atributos de dados para armazenamento de títulos local.

Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará tooltip.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minimizado .

Uso

O plug-in de dica de ferramenta gera conteúdo e marcação sob demanda e, por padrão, coloca dicas de ferramenta após seu elemento acionador. Você pode adicionar dicas de ferramentas das duas maneiras a seguir -

  • Via data attributes - Para adicionar uma dica, adicione data-toggle = "tooltip"a uma marca de âncora. O título da âncora será o texto de uma dica de ferramenta. Por padrão, a dica de ferramenta é definida como superior pelo plugin.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>
  • Via JavaScript - Acione a dica de ferramenta via JavaScript -

$('#identifier').tooltip(options)

O plug-in de dica de ferramenta NÃO é apenas plug-ins CSS, como o dropdown ou outros plug-ins discutidos nos capítulos anteriores. Para usar este plugin, você DEVE ativá-lo usando jquery (leia javascript). Para habilitar todas as dicas de ferramentas em sua página, basta usar este script -

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

Exemplo

O exemplo a seguir demonstra o uso do plug-in de dica de ferramenta por meio de atributos de dados.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

Opções

Existem certas opções que podem ser adicionadas por meio da API Bootstrap Data ou chamadas via JavaScript. A tabela a seguir lista as opções -

Nome da Opção Tipo / valor padrão Nome do atributo de dados Descrição
animação booleano padrão: verdadeiro animação de dados Aplica uma transição de fade CSS à dica de ferramenta.
html booleano padrão: falso data-html Insere HTML na dica de ferramenta. Se for falso, o método de texto do jQuery será usado para inserir conteúdo no dom. Use texto se estiver preocupado com ataques XSS.
colocação string | função Padrão: top colocação de dados

Especifica como posicionar a dica de ferramenta (ou seja, superior | inferior | esquerdo | direito | automático).

Quando auto é especificado, ele reorienta dinamicamente a dica de ferramenta. Por exemplo, se a colocação for "esquerda automática", a dica de ferramenta será exibida à esquerda quando possível, caso contrário, será exibida à direita.

seletor string Padrão: falso seletor de dados Se um seletor for fornecido, os objetos de dica de ferramenta serão delegados aos destinos especificados.
título string | função Padrão: " data-title A opção de título é o valor de título padrão se o atributo de título não estiver presente.
desencadear string Padrão: 'foco instantâneo' data-trigger Define como a dica de ferramenta é acionada: click| hover | focus | manual. Você pode passar vários gatilhos; separe-os com um espaço.
conteúdo string | função Padrão: '' data-content Valor do conteúdo padrão se o atributo data-content não estiver presente
demora número | objeto Padrão: 0 atraso de dados

Atrasos na exibição e ocultação da dica de ferramenta em ms - não se aplica ao tipo de acionamento manual. Se um número for fornecido, o retardo é aplicado tanto para ocultar / mostrar. A estrutura do objeto é -

delay: { show: 500, hide: 100 }
recipiente string | falso Padrão: falso contêiner de dados Acrescenta a dica de ferramenta a um elemento específico. Exemplo: container: 'body'

Métodos

A seguir estão alguns métodos úteis para dicas de ferramentas -

Método Descrição Exemplo

Options - .tooltip (opções)

Anexa um manipulador de dica de ferramenta a uma coleção de elementos.
$().tooltip(options)

Toggle - .tooltip ('alternar')

Alterna a dica de ferramenta de um elemento.
$('#element').tooltip('toggle')

Show - .tooltip ('show')

Revela a dica de ferramenta de um elemento.
$('#element').tooltip('show')

Hide - .tooltip ('ocultar')

Oculta a dica de ferramenta de um elemento.
$('#element').tooltip('hide')

Destroy - .tooltip ('destruir')

Oculta e destrói a dica de ferramenta de um elemento.
$('#element').tooltip('destroy')

Exemplo

O exemplo a seguir demonstra o uso do plug-in de dica de ferramenta por meio de atributos de dados.

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

Eventos

A tabela a seguir lista os eventos para trabalhar com o plug-in de dica de ferramenta. Este evento pode ser usado para conectar-se à função.

Evento Descrição Exemplo
show.bs.tooltip Este evento é disparado imediatamente quando o método show instance é chamado.
$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})
mostrado.bs.tooltip Este evento é disparado quando a dica de ferramenta torna-se visível para o usuário (aguardará a conclusão das transições CSS).
$('#myTooltip').on('shown.bs.tooltip', function () {
   // do something
})
hide.bs.tooltip Este evento é disparado imediatamente quando o método de instância de ocultar é chamado.
$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})
oculto.bs.tooltip Este evento é disparado quando a dica de ferramenta termina de ser ocultada do usuário (aguardará a conclusão das transições CSS).
$('#myTooltip').on('hidden.bs.tooltip', function () {
   // do something
})

Exemplo

O exemplo a seguir demonstra o uso do plug-in de dica de ferramenta por meio de atributos de dados.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>