English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico do Bootstrap

Plugin Bootstrap

Plugin de dica (Tooltip) Bootstrap

quando você deseja descrever um link, a dica (Tooltip) é muito útil. O plug-in de dica (Tooltip) Bootstrap é inspirado em Jason Frame escrito por jQuery.tipsy inspiração. O plug-in de dica (Tooltip) Bootstrap foi melhorado, por exemplo, não depende de imagens, mas usa CSS para efeitos de animação e armazena informações de título em atributos data.

se você quiser usar funcionalidades específicas do plugin, você precisa referenciar tooltip.jsou, como Visão geral do plugin Bootstrap como mencionado no capítulo bootstrap.js ou a versão comprimida bootstrap.min.js.

Uso

O plug-in de dica (Tooltip) gera conteúdo e marcadores conforme necessário, por padrão, coloca a dica (tooltip) atrás do elemento desencadeador. Você pode adicionar a dica (tooltip) da seguinte forma:

  • através da propriedade data：Para adicionar um tooltip, basta adicionar data-toggle="tooltip" Pronto. O título da âncora é o texto do tooltip. Por padrão, o plugin coloca o tooltip no topo.

  • através de JavaScript：Acionar o tooltip via JavaScript:

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

O plugin de Tooltip (Tooltip) não é um plugin puramente CSS, como os menus suspensoes e outros plugins discutidos anteriormente. Para usar este plugin, você deve ativar com jQuery (ler JavaScript). Use o seguinte script para ativar todos os tooltips na página:

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

Exemplo online

O exemplo a seguir demonstra como usar o plugin de Tooltip (Tooltip) através da propriedade data.

Exemplo online

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Exemplo Bootstrap　-　plugin de Tooltip (Tooltip)/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>PTooltip (Tooltip) plugin　-　âncora</h4>
Esta é uma　<a　href="#"　class="tooltip-test" data-toggle="tooltip" title="Tooltip padrão">Tooltip padrão</a>.
Esta é uma　<a　href="#"　class="tooltip-test" data-toggle="tooltip"　data-placement="left" title="Tooltip à esquerda">Tooltip à esquerda</a>.
Este é um <a href="#" data-toggle="tooltip"　data-placement="top" title="Tooltip no topo">Tooltip no topo</a>.
Este é um <a href="#" data-toggle="tooltip"　data-placement="bottom" title="Tooltip no fundo">Tooltip no fundo</a>.
Este é um <a href="#" data-toggle="tooltip"　data-placement="right" title="Tooltip à direita">Tooltip à direita</a>
<br>
<h4>PTooltip (Tooltip) plugin　-　botão</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip padrão">Tooltip padrão</button>}})
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="left" title="Tooltip à esquerda">Tooltip à esquerda
</button>}})
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="top" title="Tooltip no topo">Tooltip no topo
</button>}})
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="bottom" title="Tooltip no fundo">Tooltip no fundo
</button>}})
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="right" title="Tooltip à direita">Tooltip à direita</button>}})
<script>
	$(function () { $("[data-toggle='tooltip']").tooltip();　});
</script>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Opções

Alguns opções são adicionados pelo Bootstrap Data API ou chamados por JavaScript. A tabela a seguir lista essas opções:

Nome da opçãoTipo/Valor padrãoNome do atributo de dadosDescrição
animationboolean
Valor padrão: true		data-animationA dica de ferramenta usa o efeito de filtro de gradiente CSS.
htmlboolean
Valor padrão: false		data-htmlInserir HTML na dica de ferramenta. Se for false, o método text do jQuery será usado para inserir conteúdo no dom. Se você se preocupar com ataques XSS, use text.
placementstring|function
Valor padrão: top		data-placementEspecificar como posicionar a dica de ferramenta (ou seja, top|bottom|left|right|auto).
Quando especificado como auto O ajuste dinâmico da dica de ferramenta será ajustado conforme necessário. Por exemplo, se o placement for "auto left", a dica de ferramenta será exibida no lado esquerdo tanto quanto possível, e no caso de não ser permitido, será exibida no lado direito.
selectorstring
Valor padrão: false		data-selectorSe for fornecido um seletor, o objeto da dica de ferramenta será delegado ao alvo especificado.
titlestring | function
Valor padrão: ''		data-titleSe não for especificado title Se não for especificado, o valor padrão da opção title é o valor padrão title.
triggerstring
Valor padrão: 'hover focus'		data-triggerDefinir como ativar a dica de ferramenta: click| hover | focus | manualVocê pode passar vários triggers, separados por espaço.
delaynumber | object
Valor padrão: 0		data-delayMilissegundos de atraso para exibir e ocultar a dica de ferramenta. - Não se aplica ao tipo de trigger manual. Se for fornecido um número, o atraso será aplicado tanto ao exibir quanto ao ocultar. Se for fornecido um objeto, a estrutura é como follows:
delay:
{  show:　500,  hide:　100　}
containerstring | false
Valor padrão: false		data-containerAdicionar uma dica de ferramenta para o elemento especificado.
Exemplo: container: 'body'

Métodos

A seguir estão alguns métodos úteis para o plug-in de dica de ferramenta (Tooltip):

MétodosDescriçãoExemplo
Opções: .tooltip(options)Adicionar um manipulador de ferramenta de dica de elemento à coleção.
$().tooltip(options)
Toggle: .tooltip('toggle')切换显示/隐藏元素的提示工具。
$('#element').tooltip('toggle')
Show: .tooltip('show')显示元素的提示工具。
$('#element').tooltip('show')
Hide: .tooltip('hide')隐藏元素的提示工具。
$('#element').tooltip('hide')
Destroy: .tooltip('destroy')隐藏并销毁元素的提示工具。
$('#element').tooltip('destroy')

Exemplo online

下面的示例演示了提示工具(Tooltip)插件方法的用法。

Exemplo online

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Exemplo Bootstrap　-　工具提示(Tooltip)插件方法
	这是一个　
	Tooltip　方法　showTooltip　方法　hideTooltip　方法　destroyTooltip　方法　toggle





	
		这是一个　
		'am　Header2　</h2>">Tooltip　方法　options
	<script>
		$(function　()　{　$('.tooltip-show').tooltip('show');});
		$(function　()　{　$('.tooltip-hide').tooltip('hide');});
		$(function　()　{　$('.tooltip-destroy').tooltip('destroy');});
		$(function　()　{　$('.tooltip-toggle').tooltip('toggle');});
		-options a
	</script>
</div>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Evento

A tabela a seguir lista os eventos usados no plugin PTooltip (Tooltip). Esses eventos podem ser usados como ganchos em funções.

EventoDescriçãoExemplo
show.bs.tooltipEste evento é acionado imediatamente quando o método show é chamado.
$('#myTooltip').on('show.bs.tooltip', function () {
　　//　Executar algumas ações...
}
shown.bs.tooltipEste evento é acionado quando o PTooltip se torna visível para o usuário (aguardando a conclusão do efeito de transição CSS).
$('#myTooltip').on('shown.bs.tooltip', function () {
　　//　Executar algumas ações...
}
hide.bs.tooltipEste evento é acionado imediatamente quando o método hide é chamado.
$('#myTooltip').on('hide.bs.tooltip', function () {
　　//　Executar algumas ações...
}
hidden.bs.tooltipEste evento é acionado quando o PTooltip é ocultado do usuário (aguardando a conclusão do efeito de transição CSS).
$('#myTooltip').on('hidden.bs.tooltip', function () {
　　//　Executar algumas ações...
}

Exemplo online

O exemplo a seguir demonstra o uso do evento do plugin PTooltip (Tooltip).

Exemplo online

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Exemplo Bootstrap　-　Eventos do plugin PTooltip (Tooltip)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>PTooltip (Tooltip) plugin　-　âncora</h4>
Esta é uma　<a　href="#"　class="tooltip-show"　data-toggle="tooltip"　
	title="PTooltip padrão">PTooltip padrão
</a>.
<script>
$(function　()　{　$('.tooltip-show').tooltip('show');});
$(function　()　{　$('.tooltip-$(function() { $('.tooltip
	alert("Mensagem de Alerta ao Exibir");
})});
</script>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Plugin de Caixa de Diálogo BootstrapPlugin de Área de Navegação Bootstrap