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>

↰ Previous page Next page ↱