Bootstrap Tooltips

BY admin
|
Advertisements

Neste tutorial você aprenderá como criar dicas de ferramentas com Bootstrap.

Criar as dicas de ferramentas com o Bootstrap

Uma dica de ferramenta é um pequeno pop up que aparece quando o usuário coloca o ponteiro do mouse sobre um elemento como link ou botões para fornecer uma dica ou informação sobre o elemento que está sendo pausado.

Tooltips pode ser muito útil para os novos visitantes do seu site porque eles permitem ao usuário saber o propósito dos ícones e links colocando o ponteiro do mouse sobre eles.

Passo 1: Adicionando a Marca da Dica de Ferramenta

Para criar uma dica de ferramenta, você precisa adicionar o atributo data-toggle="tooltip" a um elemento. O texto da dica de pedágio que seria exibido no hover pode ser especificado usando o atributo title

Aqui está a marcação padrão para adicionar uma dica de pedágio a um hyperlink.

<a href=”#” data-toggle=”tooltip” title=”Some text”>Hover over me</a>

Simplesmente, você pode adicionar tooltips aos outros elementos, tais como botões, ícones, etc.

Nota: Por razões de desempenho os dados de dicas de ferramentas são opt in, significa que para usar as dicas de ferramentas você mesmo deve inicializá-las com o método tooltip().

Passo 2: Accionando as pontas de ferramentas

As pontas de ferramentas podem ser activadas via JavaScript – basta chamar o método tooltip() Bootstrap com o método id, class ou qualquer selector CSS do elemento alvo no seu código JavaScript.

Pode inicializar as pontas de ferramentas individualmente ou de uma só vez. O seguinte código jQuery inicializará todas as dicas de ferramentas em uma página selecionando-as pelo seu atributo data-toggle.

Exemplo

Tente este código ” 

<script>$(document).ready(function(){ $('').tooltip(); });</script>

– A saída do exemplo acima será algo parecido com isto:

Definir as instruções de pontas de ferramentas

Você pode definir pontas de ferramentas para aparecer no topo, direita, fundo e lado esquerdo de um elemento.

Posicionamento das pontas de ferramentas através dos atributos de dados

O exemplo seguinte mostrará como definir a direção das pontas de ferramentas através dos atributos de dados.

Posicionamento de pontas de ferramentas via JavaScript

O exemplo seguinte mostrará como definir a direção das pontas de ferramentas via JavaScript.

Opções

Existem certas opções que podem ser passadas para tooltip() Método Bootstrap para personalizar a funcionalidade do plugin de pontas de ferramentas.

>

Nome Tipo Valor por defeito Descrição
animação booleano verdadeira Aplicar uma transição de fade CSS para a dica da ferramenta.
html boolean false Inserir html na dica da ferramenta. Se falso, o método jQuery’s text() será usado para inserir conteúdo no DOM. Use texto se estiver preocupado com ataques XSS.
placement string | function ‘top’ Define a posição da dica de ferramenta – top | bottom | left | right | auto. Quando o valor “auto” é especificado, ele irá reorientar dinamicamente a dica da ferramenta.
selector string falso Se for fornecido um selector, os objectos da dica da ferramenta serão anexados aos alvos especificados.
title string | function ” Define o valor padrão title value if title attribute is not present.
trigger string ‘hover focus’ Especifique como a ponta de ferramenta é acionada – clique | hover | focus | manual. Note que você passa o disparador em caso de passagem de caixa, espaço separado, tipos de disparo.
delay número | objeto 0

Tempo para atrasar a exibição e ocultação da dica de ferramenta (ms) – não se aplica ao tipo de disparo manual.

Se for fornecido um número, o atraso é aplicado tanto para esconder/exibir a estrutura do objeto:
delay: { show: 500, hide: 100 }
container string | false false Aplica a dica de ferramenta a um elemento específico container: 'body'
modelo string

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

>

Base HTML para usar ao criar a dica de ferramenta. O título da dica de ferramenta será inserido no elemento com a classe .tooltip-inner e o elemento com a classe .tooltip-arrow tornar-se-á a seta da dica de ferramenta.

O elemento de invólucro mais externo deverá ter a classe .tooltip.
viewport string | object { selector: 'body', padding: 0 } Keeps a dica de ferramenta dentro dos limites deste elemento. Exemplo: viewport: '#viewport' ou { selector: '#viewport', padding: 0 }
offset número | string 0 Offset da dica da ferramenta em relação ao seu alvo.
fallbackPlacement string | array ‘flip’ Permite-lhe especificar qual a posição que o Popper irá usar no fallback.
boundary string | element ‘scrollParent’ Overflow constraint boundary of the tooltip. Aceita os valores de 'viewport', 'window', 'scrollParent', ou uma referência HTMLElement (apenas JavaScript).
sanitize boolean true Enable or disable the sanitization. Se ativadas as opções ‘template’ e ‘title’ serão higienizadas.
whiteList objeto valor Objeto que contém atributos e tags permitidos.
sanitizeFn null | function null Allows you to specify your own sanitize function.

You may set these options either through the use of data attributes or JavaScript. Para definir as opções de dicas através de atributos de dados, basta anexar o nome da opção a data- junto com o valor correto, como data-animation="false", data-placement="bottom" etc.

No entanto, o JavaScript é a maneira mais preferível para definir essas opções, pois evita que você trabalhe de forma repetitiva. Veja o método de dicas de ferramentas $().tooltip(options) na seção abaixo para saber como definir as opções de dicas de ferramentas usando o JavaScript.

Métodos

Estes são os métodos de dicas de ferramentas padrão do Bootstrap:

$().tooltip(options)

Este método liga o manipulador de dicas de ferramentas a um grupo de elementos. Ele também permite que você defina as opções para as tooltips, para que você possa customizá-las de acordo com suas necessidades.

O exemplo seguinte irá inserir o texto especificado dentro das dicas de ferramentas se o valor do atributo title for omitido ou ausente dos elementos selecionados:

O exemplo seguinte irá mostrar-lhe como colocar o conteúdo HTML dentro de uma dica de ferramenta:

O exemplo seguinte irá mostrar-lhe como controlar o tempo de exibição e ocultação da dica de ferramenta usando a opção delay da dica de ferramenta via JavaScript.

O exemplo seguinte irá mostrar-lhe como pode criar o seu próprio template personalizado para as dicas de ferramentas Bootstrap em vez de usar o padrão.

O exemplo seguinte irá inserir o código HTML gerado dinamicamente da dica de ferramenta no final de um elemento .wrapper em vez do elemento <body>.

Nota: Substituindo a dica de ferramenta padrão container o valor da opção não produz nenhuma diferença visível na página. Para ver o resultado real você precisa inspecionar o DOM resultante usando as ferramentas Firebug ou Developer.

Simplesmente, você pode definir outras opções para as pontas das ferramentas usando o método $().tooltip(options). Vamos verificar os outros métodos do plugin de dicas de ferramentas Bootstrap.

.tooltip(‘show’)

Este método revela a dica de um elemento.

Exemplo

Tente este código ” 

<script>$(document).ready(function(){ $(".show-tooltip").click(function(){ $("#myTooltip").tooltip('show'); }); });</script>

.tooltip(‘hide’)

Este método esconde a tooltip de um elemento.

Exemplo

Tente este código ” 

<script>$(document).ready(function(){ $(".hide-tooltip").click(function(){ $("#myTooltip").tooltip('hide'); }); });</script>

.tooltip(‘toggle’)

Este método alterna a tooltip de um elemento.

Exemplo

Tente este código ” 

<script>$(document).ready(function(){ $(".toggle-tooltip").click(function(){ $("#myTooltip").tooltip('toggle'); }); });</script>

.tooltip(‘dispose’)

Este método esconde e destrói a tooltip de um elemento.

.tooltip(‘enable’)

Este método dá à tooltip de um elemento a capacidade de ser mostrada. As dicas de ferramentas são ativadas por padrão.

Exemplo

Tente este código ” 

<script>$(document).ready(function(){ $(".enable-tooltip").click(function(){ $("#myTooltip").tooltip('enable'); }); });</script>

.tooltip(‘disable’)

Este método remove a habilidade para que a dica de ferramenta de um elemento seja mostrada. A dica de ferramenta só poderá ser mostrada se estiver habilitada novamente.

.tooltip(‘toggleEnabled’)

Este método alterna a habilidade para que a dica de ferramenta de um elemento seja mostrada ou oculta.

.tooltip(‘update’)

Este método atualiza a posição da tooltip de um elemento.

Exemplo

Tente este código ” 

<script>$(document).ready(function(){ $(".update-tooltip").click(function(){ $("#myTooltip").tooltip('update'); }); });</script>

Events

A classe tooltip da bootstrap inclui poucos eventos para se conectar à funcionalidade da tooltip.

Evento Descrição
show.bs.tooltip Este evento dispara imediatamente quando o método mostrar instância é chamado.
show.bs.tooltip Este evento é disparado quando a tooltip se torna visível para o usuário. Ele irá esperar até que o processo de transição CSS esteja totalmente concluído antes de ser disparado.
hide.bs.tooltip Este evento é disparado imediatamente quando o método de ocultar instância for chamado.
hidden.bs.tooltip Este evento é disparado quando a tooltip tiver terminado de ser ocultada do usuário. Ele irá esperar até que o processo de transição CSS esteja totalmente concluído antes de ser disparado.
inserted.bs.tooltip Este evento é disparado após o evento show.bs.tooltip quando o tooltip template tiver sido adicionado ao DOM.

O exemplo seguinte exibirá uma mensagem de alerta para o usuário quando a transição de fade out da tooltip tiver sido totalmente concluída.

Advertisements