Dicas de ferramentas do Bootstrap não funcionam

Eu estou ficando louco aqui.

Eu tenho o seguinte HTML:

test 

E a dica de ferramenta do estilo Bootstrap se recusa a exibir, apenas uma dica de ferramenta normal.

Eu tenho bootstrap.css funcionando muito bem, e eu posso ver as aulas lá

Eu tenho todos os arquivos JS relevantes no final do meu arquivo HTML:

      

Eu olhei para a fonte do exemplo do Bootstrap e não consigo ver nada que inicie a dica de ferramenta em qualquer lugar lá. Então eu acho que deveria funcionar, ou estou faltando algo vital aqui?

Eu tenho modals e alertas e outras coisas funcionando muito bem, então eu não sou um idiota total;)

Obrigado por qualquer ajuda!

Para resumir: ative suas dicas usando seletores jQuery

  

Na verdade, você não precisa usar o seletor de atributos, você pode invocá-lo em qualquer elemento, mesmo que ele não tenha rel="tooltip" em sua tag.

Depois de experimentar o mesmo problema, descobri que essa solução funcionou sem ter que adicionar atributos de tag adicionais fora dos atributos obrigatórios do Bootstrap.

HTML

 Hyperlink Text 

JQuery

 $(document).ready(function() { $("body").tooltip({ selector: '[data-toggle=tooltip]' }); }); 

Espero que isto ajude!

Você não precisa de todos os arquivos js separadamente

Apenas use os seguintes arquivos se você for usar todas as funções de bootstrap:

 -bootstrap.css -bootstrap.js 

ambos podem ser encontrados em http://twitter.github.com
e finalmente
Versão mais recente do jquery.js


Para Glyphicons você precisa da imagem

glyphicons-halfings.png e / ou glyphicons-halfings-white.png (imagens coloridas em branco)
qual vc precisa fazer upload dentro da pasta / img / do seu site (ou) armazená-lo onde quiser, mas mude o diretório da pasta dentro do bootstrap.css


Para a dica de ferramenta, você precisa do seguinte script dentro da sua tag

   

É isso aí…

http://getbootstrap.com/javascript/#tooltips-usage

Funcionalidade de opt-in Por motivos de desempenho, os dados apis de Tooltip e Popover são opt-in, ou seja,

você deve inicializá-los você mesmo.

Uma forma de inicializar todas as dicas de ferramentas em uma página seria selecioná-las por seu atributo data-toggle:

  

colocando este pedaço de código no seu html permite que você use as dicas de ferramentas

Exemplos:

    Hover over me 

Eu sei que esta é uma questão antiga, mas desde que eu tive esse problema com a nova versão do bootstrap e não é claro no site, aqui está como você ativa a dica de ferramenta.

dê ao seu elemento uma class como “test-tool”

em seguida, ative esta class na sua tag de javascript:

  This link 

HTML

 Hyperlink Text 

JQuery

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

Este é um trabalho para mim.

Se você fizer $("[rel='tooltip']").tooltip(); Como outras respostas sugeriram, você ativará dicas apenas nos elementos que estão atualmente no DOM. Isso significa que, se você for alterar o DOM e inserir conteúdo dynamic mais tarde, não funcionará. Além disso, isso é muito menos eficiente, pois instala o manipulador de events para elementos individuais , em vez de usar a delegação de events do JQuery. Então, a melhor maneira que encontrei para ativar as dicas de ferramenta do Bootstrap é essa linha de código que você pode colocar no documento pronto e esquecê-lo:

 $(document.body).tooltip({ selector: "[title]" }); 

Observe que estou usando title como seletor em vez de rel=title ou data-title . Isso tem uma vantagem que pode ser aplicada a muitos outros elementos (o rel deve ser apenas para âncoras) e também funciona como “fallback” para navegadores antigos.

Observe também que você não precisa do atributo data-toggle="tooltip" se estiver usando o código acima.

As dicas de ferramentas do Bootstrap são caras porque você precisa manipular os events do mouse em cada um dos elementos. Essa é a razão pela qual eles não foram ativados por padrão. Então, se você decidir comentar a linha acima, sua página ainda funcionará se você usar o atributo title.

Se você está certo em não usar o atributo title, então eu recomendaria usar uma solução CSS pura, como Hint.css, ou verificar http://csstooltip.com, que não requer nenhum código JavaScript.

Esse é o caminho mais simples. Basta colocar isso antes :

  

Confira os exemplos dados na documentação do Bootstrap sobre dicas de ferramentas .

Por exemplo:

 Link with tooltip 

Tooltip e popover NÃO são apenas plugins CSS-css como dropdown ou barra de progresso. Para usar dicas de ferramentas e popover, você deve ativá-los usando jquery (leia javascript).

Então, digamos que queremos que um popover seja mostrado no clique de um botão html.

 button 

Então você precisa ter o seguinte código javascript para ativar o popover:

 $('.popovers-to-be-activated').popover(); 

Na verdade, acima do código javascript irá ativar o popover em todos os elementos html que têm a class “popovers-to-be-activated”.

Escusado será dizer, colocar o javascript acima dentro de callback pronto para DOM para ativar todos os popovers, assim como DOM está pronto:

 $(function() { // Handler for .ready() called. $('.popovers-to-be-activated').popover(); }); 

na seção da cabeça você precisa adicionar o seguinte código primeiro

       

Então na seção do corpo você precisa escrever o seguinte código

 

The data-placement attribute specifies the tooltip position.

Se tudo ainda não for resolvido Use a biblioteca Jquery mais recente, você não precisa de nenhum dos seletores jquery se você usar o último bootstrap 2.0.4 e jquery-1.7.2.js

Apenas use rel="tooltip" title="Your Title" data-placement=" "

Use top / bottom / left / right na colocação de dados conforme seu desejo.

Eu adicionei jquery e bootstrap-tooltip.js no header. Adicionando este código no rodapé funciona para mim! mas quando eu adiciono o mesmo código no header, não funciona!

  

Se usar o Rails + Haml é muito mais fácil include a dica de ferramenta, faça:

 = link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide" 

Isso é apenas adicionar a seguinte linha no final do elemento.

 :rel => "tooltip", :title => "Referential Guide" 

No meu caso particular, não funcionou porque eu incluí duas versões do jQuery. Um para o bootstrap, mas outro (outra versão) para o Google Charts.

Quando eu removo o carregamento do jQuery para os charts, ele funciona bem.

Acabei de adicionar:

  

abaixo bootstrap.min.js e funciona.

Vamos usar um exemplo para mostrar como as Dicas de Ferramentas podem ser adicionadas a qualquer elemento HTML em seu documento.

NOTA:

Se essas amostras de dicas de ferramenta não funcionarem quando você as colocar na sua página, você terá outro problema. Você precisa ver coisas como:

  • A ordem dos scripts incluídos
  • Veja se você está tentando inicializar elementos HTML que foram removidos
  • Veja se você está tentando chamar methods em arquivos JS que você não está mais incluindo
  • Veja se você está incluindo o arquivo JS que fornece a funcionalidade de que você precisa (não apenas para dicas de ferramentas, mas para todos os componentes usados ​​na página).

           ... your HTML code ...     ... your JavaScript initializers ...  

A falha de QUALQUER um dos itens acima pode (e geralmente impede) de carregar e / ou executar o JavaScript e isso mantém tudo legal e quebrado.

EXEMPLOS DE TRABALHO

Digamos que você tenha um selo e queira mostrar uma dica de ferramenta quando o usuário passar por cima dela.

HTML original:

 Admin Mode 

Dicas simples de bootstrap

Se você estiver criando dicas de ferramentas para um elemento HTML e estiver usando as dicas de ferramenta do Bootstrap simples, então será responsável por chamar os inicializadores da dica de ferramenta com seu próprio código JavaScript.

ANTES

 Admin Mode 

DEPOIS DE

 Admin Mode 

INICIALIZADOR

  

Dicas de ferramentas de modelo do Bootstrap (como INSPINIA)

Se você estiver usando um modelo de bootstrap (como INSPINIA), estará incluindo um script de suporte para suportar os resources do modelo:

   

No caso de INSPINIA, o script incluído inicializa automaticamente todas as dicas executando o seguinte código javascript quando o documento terminar de carregar:

 // Tooltips demo $('.tooltip-demo').tooltip({ selector: "[data-toggle=tooltip]", container: "body" }); 

Por causa disso, você não precisa inicializar as dicas de ferramentas no estilo INSPINIA. Mas você tem que formatar seus elementos de uma maneira específica. O Initializer procura elementos HTML com o tooltip-demo no atributo class , em seguida, chama o método tooltip() para inicializar quaisquer elementos filho que tenham o atributo data-toggle="tooltip" definido.

Para nosso selo de exemplo, coloque um elemento externo em torno dele (como

ou ) que tenha class="tooltip-demo" e coloque os atributos de troca de data-placement e title para a dica de ferramenta real dentro do elemento que é o emblema. Modifique o HTML original de cima para parecer algo assim:

ANTES

 Admin Mode 

DEPOIS DE

  Admin Mode  

INICIALIZADOR

 None 

Note que qualquer elemento filho dentro do elemento terá sua dica devidamente preparada. Eu poderia ter três elementos filho, todos precisando de dicas de ferramentas e colocá-los dentro de um contêiner.

Vários itens, cada um com uma dica de ferramenta

  Text 001 Text 002 Text 003  

O melhor uso para isso seria adicionar a class="tooltip-demo" a um

ou um mais externo

ou .

Dicas de ferramenta de boot simples ao usar um modelo

Se você estiver usando INSPINIA, mas não quiser adicionar tags

ou externas extras para criar dicas de ferramentas, poderá usar as Dicas de ferramentas padrão do Bootstrap sem interferir no modelo. Nesse caso, você será responsável por inicializar as dicas de ferramentas por conta própria. No entanto, você deve usar um valor personalizado no atributo de class para identificar seus itens de dica de ferramenta. Isso evitará que o inicializador da dica de ferramenta interfira nos elementos afetados pela INSPINIA. Em nosso exemplo, vamos usar o standalone-tt :

ANTES

 Admin Mode 

DEPOIS DE

 Admin Mode 

INICIALIZADOR

  

Se você estiver criando seu html que contém a dica de ferramenta com javascript e, em seguida, inserindo-o no documento, será necessário ativar o popover / dica de ferramenta APÓS ter inserido o html no documento, não no carregamento do documento …

Você deve colocar o javascript tooltip após o html. como isso :

  I am Here  

Ou use $ (document) .ready:

 $(document).ready(function() { $("* [rel='tooltip']").tooltip({ html: true, placement: 'bottom' }); });  

A dica de ferramenta não está funcionando porque você colocou a dica de ferramenta html antes do javascript , para que eles não saibam se existe um javascript para a dica de ferramenta. Na minha opinião, o roteiro é lido de cima para baixo.

Eu tive um problema semelhante e especialmente se você estiver executando em um contêiner de botão como um contêiner de botão vertical. Nesse caso, você tem que definir o contêiner como o ‘corpo’

 I have added a jsfiddle example 

exemplo

Coloque seu código dentro do documento pronto

 $(document).ready(function () { if ($("[rel=tooltip]").length) { $("[rel=tooltip]").tooltip(); } }); 

No meu caso, eu também estava faltando as classs css tooltip em http://twitter.github.com/bootstrap/assets/css/bootstrap.css, então não se esqueça disso.

Você precisa fazer o seguinte:

  • Adicione o código em algum lugar da sua página (preferencialmente na seção )
  • Adicionar data-toggle: "tooltip" a qualquer coisa que você queira habilitar com ela.

Adicione data-toggle="tooltip" em qualquer elemento que você quiser com uma dica de ferramenta.

De documentos de bootstrap em dicas de ferramentas

As dicas de ferramentas são ativadas por motivos de desempenho, portanto, você deve inicializá-las você mesmo. Uma maneira de inicializar todas as dicas de ferramentas em uma página seria selecioná-las por seu atributo data-toggle:

  $('[data-toggle="tooltip"]').tooltip() 

Alternativa rápida e mais leve ao plugin de dica de ferramenta do Bootstrap:

HTML:

 
6 characters long, must include letters and numbers

CSS:

  

JSCRIPT:

 $(".mytooltip").mouseover(function(){ var elm = this.id; $("#" + elm + "_tttext").fadeIn("slow"); }); var ttTmo; $(".mytooltip").mouseout(function(){ var elm = this.id; clearTimeout(ttTmo); ttTmo = setTimeout(function(){ $("#" + elm + "_tttext").fadeOut("slow"); },3000); }); 

Rótulo / texto deve ser colocado em um wrapper da class “mytooltip”. Esse wrapper deve ter um Id.

Após o label, há o texto da dica de ferramenta contido em uma div da class “mytooltiptext” e id consistindo no id do wrapper pai + “_tttext”. Outras opções para seletores podem ser usadas.

Espero que ajude.