260

Estou ficando louco aqui.

Eu tenho o seguinte HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

E a dica de ferramenta no estilo Bootstrap se recusa a ser exibida, apenas uma dica de ferramenta normal.

Eu tenho o bootstrap.css funcionando bem, e eu posso ver as classes lá

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

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

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

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

Obrigado por qualquer ajuda!

twitter-bootstrap Mike Bartlett
fonte

2

A dica de ferramenta está sendo iniciada no arquivo application.js no exemplo do twitters. Você pode postar seu html? Gostaria de dar uma olhada em como você está inicializando o script.

Andres Ilich

2

Ahhhhh .... eu ignorei isso dado o primeiro comentário. Portanto, isso deve funcionar: code<a href="#" rel="tooltip" title="Uma boa dica de ferramenta" class="tooltip-test"> teste </a> <br> <script> // tooltip demo $ (' .tooltip-test '). tooltip () </script>

Mike Bartlett

1

não se esqueça de passar um seletor para as opções dica,$('.tooltip-test').tooltip({ selector: "a" })

Andres Ilich

Obrigado Andrés. Na verdade, eu não parecia precisar do seletor, acho que é porque a classe da é referenciada como teste de dica de ferramenta.

25812 Mike Bartlett

3

Sem a opção seletor, a dica de ferramenta não funciona para mim. Aqui está uma demonstração que eu coloquei: jsfiddle.net/VXctp , tente sem o seletor.

Andres Ilich

276

Para resumir: ative as dicas de ferramentas usando os seletores jQuery

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

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

Manuel Ebert
fonte

13

Para aqueles que trabalham com Rails, isso já está definido no bootstrap.js.coffeecom $(".tooltip").tooltip(). Apenas certifique-se de incluir //= require bootstrapno seu application.js.

slhck

6

Adicionar a classe .tooltip a qualquer elemento quebrará as dicas de ferramentas para mim. O conteúdo dentro do elemento com a classe .tooltip será oculto e a dica de ferramenta será exibida se eu conseguir encontrar o elemento oculto com o mouse. O uso de qualquer outro nome de seletor ou classe funcionará bem. \

Leonel Galán

4

@ Leito que está correto, o bootstrap define estilos para .tooltipe, por padrão, eles são invisíveis. Você pode usar o relatributo ou qualquer outra classe como seletor, no entanto.

Manuel Ebert

3

Sim, você precisa da marcação HTML e dos seletores JS. Essas não são formas alternativas de aplicar dicas de ferramentas.

ATSiem

1

Alguns podem estar tentando exibir uma dica de ferramenta em um modal e isso não funciona em todas as versões de inicialização. Se você tentar em uma página normal, não modal, e funcionar, então você sabe que é o problema.

Mjnissim

212

Depois de enfrentar o mesmo problema, descobri que esta solução funcionava sem a necessidade de adicionar atributos de tag adicionais fora dos atributos necessários do Bootstrap.

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

Espero que isto ajude!

Marcus Hoelscher
fonte

20

Obrigado! Isso funcionou para mim. De alguma forma, as outras soluções nesta página não estavam funcionando para mim.

Roman

1

Eu estou com Roman. Essa solução também funciona com as variantes de css do bootswatch.

DaveCS

Isso funcionou para mim. Nada mais chutou a vida até eu tentar isso. Obrigado!

BlakePetersen

1

Isso funcionou para mim também. Alguma idéia do porquê $ ('[data-toggle = "tooltip"]'). Tooltip ({'placement': 'top'}); não funciona?

ZeroCool

Obrigado, isso funcionou para mim. Apenas certifique-se de inserir o código entre as tags <script> DEPOIS de carregar a biblioteca JQuery.

GeraldScott

31

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

Basta usar os seguintes arquivos se você quiser usar todas as funções de inicialização:

-bootstrap.css
-bootstrap.js

ambos podem ser encontrados em http://twitter.github.com
e finalmente a
última versão do jquery.js

Para Glyphicons, você precisa da imagem

glyphicons-halfings.png e / ou glyphicons-halfings-white.png (imagens coloridas em branco)
que você precisa carregar dentro da pasta / img / do seu site (ou) armazene-o onde quiser, mas altere o diretório da pasta dentro do bootstrap .css

Para dica de ferramenta, você precisa do seguinte script dentro de sua <head> </head>tag

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

É isso aí...

Harish Kumar
fonte

27

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

Funcionalidade de ativação Por motivos de desempenho, as apis de dados de Dica de ferramenta e Popover são ativadas, o que significa

você deve inicializá-los você mesmo.

Uma maneira de inicializar todas as dicas de ferramentas em uma página seria selecioná-las pelo atributo de alternância de dados:

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

colocar esse pedaço de código em seu html permite usar as dicas de ferramentas

Exemplos:

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

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

Max O.
fonte

2

Obrigado por compartilhar este conceito de aceitação! Nunca leia em nenhum tutorial.

dpp

A solução para todos os meus jQuery / Bootstrap whoas dica

DJ Burb

O link fornecido está ausente: veja getbootstrap.com/docs/4.1/components/tooltips

Guillaume Husta

20

Sei que essa é uma pergunta antiga, mas como tive esse problema com a nova versão do bootstrap e não está clara no site, veja como ativar a dica de ferramenta.

dê ao seu elemento uma classe como "tooltip-test"

em seguida, ative esta classe na sua tag javascript:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

Amir Soleymani
fonte

Esta foi a única solução que funcionou para mim. Estou usando data-original-title = "{{someAngularJSVar}}" "para atualizar o título e ele está funcionando perfeitamente.

WKara

19

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

Este é trabalho para mim.

Igor Shvydok
fonte

1

Essa proposta funcionou perfeitamente para mim também. Gostei porque é simples e elegante. Ele permite que você continue usando os padrões do Bootstrap como se o plug-in tivesse sido inicializado por padrão, como acontece com os elementos suspenso e guia. Eu adicionei o JS proposto por @Igor para um novo arquivo e empacotado-lo aos bootstrap.js originais

Iago Rodríguez-Quintana

14

Se você fizer $("[rel='tooltip']").tooltip();as outras respostas sugeridas, ativará as dicas de ferramentas apenas nos elementos que estão atualmente no DOM. Isso significa que, se você alterar o DOM e inserir conteúdo dinâmico posteriormente, ele não funcionará. Além disso, isso é muito menos eficiente porque instala o manipulador de eventos para elementos individuais , em vez de usar a delegação de eventos JQuery. Portanto, a melhor maneira que encontrei para ativar as dicas de ferramentas do Bootstrap é esta linha de código que você pode colocar no documento pronto e esquecê-lo:

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

Observe que estou usando titlecomo seletor em vez de rel=titleou data-title. Isto tem uma vantagem que ele pode ser aplicado a muitos outros elementos (o relé suposto ser apenas para âncoras) e também funciona como "fallback" para navegadores antigos.

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

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

Se você não usar o atributo title, recomendo o uso de uma solução CSS pura, como Hint.css ou verifique http://csstooltip.com, que não requer nenhum código JavaScript.

Shital Shah
fonte

Estou lutando com este porque a geração dinâmica vai a vários níveis de profundidade. O valor href é um conteúdo gerado dinamicamente e o ID da div resultante é baseado no número do item que corresponde ao valor href. Portanto, se eu tenho uma página de links do Item Tipo A, tenho uma lista do item a-1, item a-2, item a-3, cada um desses links é para a página individual dos itens, mas eu quero o conteúdo da dica de ferramenta para exibir conteúdo dinâmico ao passar o mouse, para que o usuário possa ter uma idéia do item antes de clicar no link completo.

Melanie Sumner

Este foi o mais útil. Eu tinha a dica de ferramenta definida para vincular a um ícone, e a biblioteca de ícones tinha algum tipo de carregamento assíncrono para que não pudesse ser vinculado. Era tão estranho porque funcionaria ao usar um seletor de classe, mas não o ID. Obrigado pela ajuda!

Nick Woodhams

14

Esta é a maneira mais simples. Basta colocar isso antes </body>:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

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

Por exemplo:

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

Marcos Cassiano
fonte

2

feche o atributo type ... editar apenas um único erro de digitação é um PITA: S

Mohd Abdul Mujib 5/14

10

Dica de ferramenta e popover NÃO são plugins apenas de CSS, como dropdown ou progressbar. Para usar dicas de ferramentas e popover, você DEVE ativá-las usando jquery (leia javascript).

Então, digamos que queremos que uma popover seja mostrada ao clicar em um botão html.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

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

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

Na verdade, o código javascript acima ativará o popover em todos os elementos html que possuem a classe "popovers a serem ativados".

Escusado será dizer que, coloque o javascript acima dentro do retorno de chamada pronto para DOM para ativar todos os popovers assim que o DOM estiver pronto:

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

Mayank Jaiswal
fonte

5

na seção principal, você precisa adicionar o seguinte código primeiro

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip();   
});
</script>

Em seguida, na seção do corpo, você precisa escrever o seguinte código

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

Rush.2707
fonte

4

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

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

Use superior / inferior / esquerda / direita na colocação de dados conforme seu desejo.

Harish Kumar
fonte

3

Eu adicionei jquery e bootstrap-tooltip.js no cabeçalho. Adicionar este código no rodapé funciona para mim! mas quando adiciono o mesmo código no cabeçalho, ele não funciona!

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

Karthik
fonte

3

Nesse caso, o DOM ainda não foi carregado, portanto, todos os elementos não existem na página. Embrulhe o código acima em$(function() { ... });

johnml

3

Se o uso do Rails + Haml for muito mais fácil de incluir a dica de ferramenta, basta:

= 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"

Andres Calle
fonte

Estava realmente esperando que isso funcionasse para mim, mas infelizmente não funcionou.

Turboladen

Agora eu gosto mais do Djanto do que do Rails, mas se você colar seu código, posso tentar dar uma dica.

Andres Calle

3

No meu caso particular, não funcionou porque eu estava incluindo duas versões do jQuery. Um para inicialização, mas outro (outra versão) para o Google Charts.

Quando removo o carregamento do jQuery para os gráficos, ele funciona bem.

Dieter
fonte

3

Acabei de adicionar:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

abaixo do bootstrap.min.js e funciona.

Andy.sin
fonte

3

Vamos usar um exemplo para mostrar como as dicas de ferramentas podem ser adicionadas a qualquer elemento HTML no seu documento.

NOTA:

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

A ordem dos scripts sendo incluídos
Veja se você está tentando inicializar elementos HTML que foram removidos
Veja se você está tentando chamar métodos nos arquivos JS e não está mais incluindo

Veja se você está incluindo o arquivo JS que fornece a funcionalidade necessária (não apenas para dicas de ferramentas, mas para qualquer componente usado na página).

<head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

A falha de QUALQUER dos itens acima pode (e geralmente impede) o carregamento e / ou a execução do javascript, e isso mantém tudo agradável e quebrado.

EXEMPLOS DE TRABALHO

Digamos que você tenha um selo e queira que ele mostre uma dica de ferramenta quando o usuário passar o mouse sobre ele.

HTML original:

<span class="badge badge-sm badge-plain">Admin Mode</span>

Dicas de ferramentas simples de inicialização

Se você estiver criando dicas de ferramentas para um Elemento HTML e estiver usando dicas de ferramentas simples de inicialização, será responsável por chamar os Inicializadores de dicas de ferramentas com seu próprio código JavaScript.

ANTES

<span class="badge badge-sm badge-plain">Admin Mode</span>

DEPOIS DE

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INICIALIZADOR

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

Dicas de ferramentas de modelo de inicialização (como INSPINIA)

Se você estiver usando um modelo de autoinicialização (como INSPINIA), estará incluindo um script de suporte para suportar os recursos do modelo:

    <script src="/Scripts/app/inspinia.js" />

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

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

Por esse motivo, você NÃO precisa inicializar as Dicas de Ferramentas no estilo INSPINIA. Mas você precisa formatar seus elementos de uma maneira específica. O Inicializador procura elementos HTML com tooltip-demono classatributo e chama o tooltip()método para inicializar qualquer elemento filho que tenha o atributo data-toggle="tooltip"definido.

Para o nosso exemplo crachá, coloque um elemento exterior em torno dele (como um <div>ou <span>) que tem class="tooltip-demo", em seguida, coloque o data-toggle, data-placemente,title atributos para a dica real dentro do elemento que é o distintivo. Modifique o HTML original acima para ficar assim:

ANTES

<span class="badge badge-sm badge-plain">Admin Mode</span>

DEPOIS DE

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

INICIALIZADOR

None

Observe que qualquer elemento filho dentro do <span class="tooltip-demo">elemento terá sua dica de ferramenta adequadamente preparada. Eu poderia ter três elementos filhos, todos precisando de dicas de ferramentas, e colocá-los em um contêiner.

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

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

O melhor uso para isso seria adicionar class="tooltip-demo"um a <td>ou um <div>ou mais externo <span>.

Dicas de ferramentas simples de inicialização ao usar um modelo

Se você estiver usando o INSPINIA, mas não desejar adicionar tags <div>ou <span>tags externas adicionais 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. No entanto, você deve usar um valor personalizado no classatributo para identificar seus itens de dica de ferramenta. Isso impedirá que o inicializador da dica de ferramenta interfira nos elementos afetados pelo INSPINIA. No nosso exemplo, vamos usarstandalone-tt :

ANTES

<span class="badge badge-sm badge-plain">Admin Mode</span>

DEPOIS DE

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INICIALIZADOR

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>

Mike Stillion
fonte

2

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 a popover / dica de ferramenta DEPOIS de inserir o html no documento, não no carregamento do documento ...

chri_chri
fonte

2

Você deve colocar o javascript da dica de ferramenta após o html. como isso :

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

Ou use $ (document) .ready:

$(document).ready(function() {

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

});

</script>

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

Ampliação
fonte

2

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ê deve definir o contêiner como o 'corpo'

I have added a jsfiddle example

exemplo

Shawn Vader
fonte

1

Coloque seu código dentro do documento pronto

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

No meu caso, também estava faltando as classes css da dica de ferramenta em http://twitter.github.com/bootstrap/assets/css/bootstrap.css, para não esquecer isso.

Joao Leme
fonte

1

Dos documentos de inicialização nas dicas de ferramentas

As dicas de ferramentas são ativadas por motivos de desempenho; portanto, você mesmo deve inicializá-las. Uma maneira de inicializar todas as dicas de ferramentas em uma página seria selecioná-las pelo atributo de alternância de dados:

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

Rahil Ahmad
fonte

0

Adicione os data-toggle="tooltip"elementos que desejar com uma dica de ferramenta.

Calum Childs
fonte

0

Você precisa fazer o seguinte. Adicione o

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

código em algum lugar da sua página (de preferência no <head> seção).

Adicione também data-toggle: "tooltip"a qualquer coisa que você deseja ativar.

Calum Childs
fonte

0

você pode usar o Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

E chame a função de dica de ferramenta:

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

Mohsen Newtoa
fonte

-2

Alternativa rápida e mais leve ao plug-in de dica de ferramenta do Bootstrap:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

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);
});

O rótulo / texto deve estar entre um invólucro da classe "mytooltip" Este invólucro deve ter um ID.

Após o rótulo, há o texto da dica de ferramenta agrupado em uma div da classe "mytooltiptext" e o ID consistindo no ID do wrapper pai + "_tttext". Outras opções para seletores podem ser usadas.

Espero que ajude.

jdisla
fonte

As dicas de ferramentas do Bootstrap não estão funcionando

Respostas:

NOTA:

EXEMPLOS DE TRABALHO

Dicas de ferramentas simples de inicialização

Dicas de ferramentas de modelo de inicialização (como INSPINIA)

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

Dicas de ferramentas simples de inicialização ao usar um modelo

HTML:

CSS:

JSCRIPT: