As dicas de ferramentas são muito úteis quando você deseja descrever um link. O plug -in de tampa de ferramentas é inspirado no jQuery.tipsy escrito por Jason Frame. O plug-in da tampa de ferramentas fez muitas melhorias, como não confiar nas imagens, mas usar o CSS para obter efeitos de animação e usar atributos de dados para armazenar informações de título.
Se você deseja fazer referência à funcionalidade do plug -in separadamente, precisará fazer referência a ferramentatip.js. Ou, como mencionado no capítulo Visão geral do plug -in Bootstrap, você pode consultar o bootstrap.js ou versões compactadas do bootstrap.min.js.
1. Uso
Os plug-ins da tampa de ferramentas geram conteúdo e tags com base nos requisitos. Por padrão, as dicas de ferramentas são colocadas atrás de seus elementos de gatilho. Existem duas maneiras de adicionar dicas de ferramentas:
1. Através do atributo de dados: se você precisar adicionar uma dica de ferramenta, basta adicionar data-toggle = "Tooltip" a uma tag de âncora. O título da âncora é o texto da dica de ferramenta. Por padrão, o plug -in define a dica de ferramenta na parte superior.
<a href = "#" data-toggle = "Tooltip"> Por favor, passe sobre mim </a>
2. Através do JavaScript: Trigger ToolTip (ToolTip) através do JavaScript:
$ ('#identificador'). Tooltip (opções)O plug-in da dica de ferramenta não é como os menus suspensos e outros plug-ins discutidos anteriormente, não é um plug-in puro do CSS. Para usar o plug -in, você deve ativá -lo usando o jQuery (leia JavaScript). Use o script a seguir para ativar todas as dicas de ferramentas na página:
$ (function () {$ ("[data-toggle = 'Tooltip']"). Tooltip ();});2. Opções
Existem algumas opções adicionadas através da API de dados do Bootstrap (API de dados do Bootstrap) ou chamado por JavaScript. A tabela a seguir lista estas opções:
três. Dicas de ferramentas
// Exemplo básico <a href = "#" data-toggle = "Tooltip"> html5 </a> // A parte JS precisa declarar $ ('#seção'). Tooltip ();As dicas de ferramentas têm muitas propriedades para configurar a exibição de prompts, como segue:
<a href = "#" rel = "Tooltip" data-toggle = "Tooltip" data-animation = "false" data-html = "true" data-posting = "auto" data-seletor = "a [rel = Tooltip]" Data-Trigger = "Click" Data-Delay = "500" Data-tem = "
Basta remover os dados anteriores no JavaScript. Incluindo: animação, html, colocação, seletor, título original, título, gatilho, atraso, contêiner e modelo e outras propriedades.
// Javascript Method $ ('#Seção A'). Tooltip ({atraso: {show: 500, hide: 100,}, contêiner: 'body'});Existem quatro métodos para JavaScript: mostre, ocultar, alternar e destruir.
// Mostrar $ ('#Seção A'). Tooltip ('Show'); // Ocultar $ ('#Seção A'). Tooltip ('Hide'); // Invert Show and Hide $ ('#Seção A'). Tooltip ('Alterna'); // Ocultar e Destruir $ ('#Seção A'). Tooltip ('Destroy');Existem quatro tipos de eventos na dica de ferramenta.
// eventos, outras semelhanças
$ ('#select a'). on ('show.bs.tooltip', function () {alert ('livre quando o show é chamado!');});Esta série de tutoriais foi compilada em: Bootstrap Basic Tutorials Tópicos Especiais, bem -vindo ao clicar para aprender.
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.