Le descrizioni dei bootstrap non funzionano


261

Sto impazzendo qui.

Ho il seguente HTML:

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

E la descrizione comandi in stile Bootstrap si rifiuta di essere visualizzata, solo una descrizione comando normale.

Ho bootstrap.css che funziona bene e posso vedere le classi lì dentro

Ho tutti i file JS rilevanti alla fine del mio file 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>

Ho esaminato la fonte dell'esempio di Bootstrap e non riesco a vedere nulla che avvii la descrizione comandi da nessuna parte. Quindi immagino che dovrebbe funzionare o mi manca qualcosa di vitale qui?

Ho modali e avvisi e altre cose che funzionano bene, quindi non sono un idiota totale;)

Grazie per qualsiasi aiuto!


2
La descrizione comando viene avviata nel file application.js nell'esempio di Twitter. Puoi pubblicare il tuo html? Vorrei dare un'occhiata a come stai inizializzando lo script.
Andres Ilich,

2
Ahhhhh .... l'ho ignorato dato il primo commento. Quindi dovrebbe funzionare: code<a href="#" rel="tooltip" title="A nice tooltip" class="tooltip-test"> test </a> <br> <script> // tooltip demo $ (' .tooltip-test '). tooltip () </script>
Mike Bartlett,

1
non dimenticare di passare un selettore alle opzioni della descrizione comandi,$('.tooltip-test').tooltip({ selector: "a" })
Andres Ilich,

Grazie Andres. In realtà non mi sembrava di aver bisogno del selettore lì dentro, penso che sia perché la classe di a è indicata come tooltip-test.
Mike Bartlett,

3
Senza l'opzione del selettore la descrizione non funziona per me, ecco una demo che ho messo su: jsfiddle.net/VXctp , provalo senza il selettore.
Andres Ilich,

Risposte:


276

Per riassumere: attiva i suggerimenti usando i selettori jQuery

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

In effetti, non è necessario utilizzare il selettore di attributi, è possibile invocarlo su qualsiasi elemento anche se non è presente rel="tooltip"nel tag.


13
Per chi lavora con rotaie, questo è già definito bootstrap.js.coffeecon $(".tooltip").tooltip(). Assicurati di includere //= require bootstrapnel tuo application.js.
slhck,

6
L'aggiunta della classe .tooltip a qualsiasi elemento interromperà i suggerimenti per me. Il contenuto all'interno dell'elemento con la classe .tooltip verrà nascosto e la descrizione comandi mostrerà se riesco a trovare l'elemento nascosto con il mouse. L'uso di qualsiasi altro selettore o nome della classe funzionerà perfettamente. \
Leonel Galán

4
@Leito è corretto, bootstrap definisce gli stili per .tooltipe, per impostazione predefinita, sono invisibili. relTuttavia, puoi utilizzare l' attributo o qualsiasi altra classe come selettore.
Manuel Ebert,

3
Sì, è necessario ENTRAMBI il markup HTML e i selettori JS. Questi non sono modi alternativi per applicare i suggerimenti.
ATSiem,

1
Alcuni potrebbero tentare di visualizzare una descrizione comandi in modalità modale e ciò non funziona in tutte le versioni di bootstrap. Se lo provi in ​​una pagina normale, non modale, e funziona, allora sai che questo è il problema.
mjnissim,

212

Dopo aver riscontrato lo stesso problema, ho scoperto che questa soluzione funzionava senza dover aggiungere altri attributi di tag al di fuori degli attributi richiesti da Bootstrap.

HTML

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

JQuery

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

Spero che questo ti aiuti!


20
Grazie! Questo ha funzionato per me. In qualche modo le altre soluzioni in questa pagina non funzionavano per me.
Roman

1
Sono con Roman. Questa soluzione funziona anche con le varianti css di bootswatch.
DaveCS,

Questo ha funzionato per me. Nient'altro lo ha dato alla vita fino a quando non ho provato questo. Grazie!
BlakePetersen,

1
Questo ha funzionato anche per me. Qualche idea sul perché $ ('[data-toggle = "tooltip"]'). Tooltip ({'placement': 'top'}); non funziona?
ZeroCool

Grazie, ha funzionato per me. Assicurati solo di inserire il codice tra i tag <script> DOPO aver caricato la libreria JQuery.
GeraldScott,

31

Non hai bisogno di tutti i file js separatamente

Usa i seguenti file se intendi utilizzare tutte le funzioni bootstrap:

-bootstrap.css
-bootstrap.js

entrambi sono disponibili in http://twitter.github.com
e infine
nella versione più recente di jquery.js


Per glifi hai bisogno dell'immagine

glyphicons-halfings.png e / o glyphicons-halfings-white.png (immagini di colore bianco)
che devi caricare nella cartella / img / del tuo sito web (o) archiviarlo dove vuoi, ma cambia la directory delle cartelle all'interno del bootstrap css


Per la descrizione comandi è necessario il seguente script all'interno del <head> </head>tag

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

Questo è tutto...


27

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

Funzionalità di attivazione Per motivi di prestazioni, le API dei dati Tooltip e Popover sono opt-in, ovvero

è necessario inizializzarli da soli.

Un modo per inizializzare tutte le descrizioni comandi in una pagina sarebbe selezionarle tramite l'attributo di attivazione / disattivazione dei dati:

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

inserendo questo pezzo di codice nel tuo html puoi usare i tooltip

Esempi:

<!-- 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>

2
Grazie per aver condiviso questo concetto di attivazione! Non leggerlo mai da nessun tutorial.
dpp,

La soluzione a tutti i miei jquery / bootstrap tooltip whoas
DJ Burb

Manca il link fornito: si prega di consultare getbootstrap.com/docs/4.1/components/tooltips
Guillaume Husta,

20

So che questa è una vecchia domanda, ma poiché ho avuto questo problema con la nuova versione di bootstrap e non è chiara sul sito Web, ecco come abilitare la descrizione comandi.

dai al tuo elemento una classe come "tooltip-test"

quindi attiva questa classe nel tuo tag javascript:

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

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

Questa è stata l'unica soluzione che ha funzionato per me. Sto usando data-original-title = "{{someAngularJSVar}}" per aggiornare il titolo e funziona alla perfezione.
WKara,

20

HTML

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

JQuery

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

Questo è un lavoro per me.


1
Questa proposta ha funzionato perfettamente anche per me. Mi è piaciuto perché è semplice ed elegante. Ti consente di continuare a utilizzare gli standard Bootstrap come se il plugin venisse avviato per impostazione predefinita, come accade con gli elementi Dropdown e Tab. Ho aggiunto il JS proposto da @Igor a un nuovo file e l' ho impacchettato nell'originale bootstrap.js
Iago Rodríguez-Quintana

14

Se fai $("[rel='tooltip']").tooltip();come suggerito da altre risposte, attiverai i suggerimenti solo sugli elementi che sono attualmente presenti in DOM. Ciò significa che se cambi DOM e inserirai contenuti dinamici in un secondo momento non funzionerà. Inoltre, questo è molto meno efficiente perché installa il gestore eventi per singoli elementi anziché utilizzare la delega degli eventi JQuery. Quindi il modo migliore che ho trovato per attivare le descrizioni dei Bootstrap è questa riga di codice che puoi inserire nel documento e dimenticartene:

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

Nota che sto usando titlecome selettore anziché rel=titleo data-title. Questo ha il vantaggio di poter essere applicato a molti altri elementi ( relsi suppone che sia solo per ancore) e funziona anche come "fallback" per i vecchi browser.

Si noti inoltre che non è necessario l' data-toggle="tooltip"attributo se si utilizza il codice sopra.

Le descrizioni dei bootstrap sono costose perché è necessario gestire gli eventi del mouse su ciascuno degli elementi. Questo è il motivo per cui non l'hanno abilitato per impostazione predefinita. Quindi, se decidi di commentare la riga sopra, la tua pagina funzionerebbe comunque se utilizzi l'attributo title.

Se stai bene non usare l'attributo title, ti consiglio di usare una soluzione CSS pura come Hint.css o di controllare http://csstooltip.com che non richiede alcun codice JavaScript.


Sto lottando con questo perché la generazione dinamica arriva a diversi livelli di profondità. Il valore href è contenuto generato dinamicamente e l'id div risultante si basa sul numero di articolo che corrisponde al valore href. Quindi, se ho una pagina di collegamenti di Tipo oggetto A, allora ho un elenco di articoli a-1, articoli a-2, articoli a-3, ognuno di questi link è alla singola pagina degli articoli, ma voglio il contenuto della descrizione comandi per visualizzare il contenuto dinamico al passaggio del mouse, in modo che l'utente possa avere un'idea dell'elemento prima di fare clic sul collegamento completo.
Melanie Sumner,

Questo è stato il più utile. Avevo impostato il tooltip per legare un'icona e la libreria di icone aveva una sorta di caricamento asincrono in modo che non potesse legarsi. Era così strano perché avrebbe funzionato usando un selettore di classe ma non un ID. Grazie per l'aiuto!
Nick Woodhams,

14

Questo è il modo più semplice. Metti questo prima </body>:

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

Dai un'occhiata agli esempi forniti nella documentazione di Bootstrap sulle descrizioni dei comandi .

Per esempio:

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

2
per favore chiudi l'attributo type ... la modifica di un solo refuso è una PITA: S
Mohd Abdul Mujib

10

Tooltip e popover NON sono plugin solo per CSS come menu a discesa o barra di avanzamento. Per usare tooltip e popover, DEVI attivarli usando jquery (leggi javascript).

Quindi, supponiamo di voler mostrare un popover facendo clic su un pulsante 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>

Quindi è necessario disporre del seguente codice JavaScript per attivare il popover:

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

In realtà, sopra il codice javascript attiverà il popover su tutti gli elementi html che hanno la classe "popovers da attivare".

Inutile dire che inserisci il javascript sopra nel callback pronto per DOM per attivare tutti i popover non appena DOM è pronto:

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

5

nella sezione head è necessario aggiungere prima il seguente codice

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

Quindi nella sezione del corpo devi scrivere il seguente codice

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


4

Se tutto non è ancora stato risolto, utilizzare la libreria Jquery più recente, non è necessario alcun selettore jquery se si utilizzano gli ultimi bootstrap 2.0.4 e jquery-1.7.2.js

Basta usare rel="tooltip" title="Your Title" data-placement=" "

Usa in alto / in basso / a sinistra / a destra nel posizionamento dei dati secondo il tuo desiderio.


3

Ho aggiunto jquery e bootstrap-tooltip.js nell'intestazione. Aggiungere questo codice nel piè di pagina funziona per me! ma quando aggiungo lo stesso codice nell'intestazione non funziona!

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

3
In questo caso il DOM non è stato ancora caricato, quindi tutti gli elementi non esistono nella pagina. $(function() { ... });
Inserisci

3

Se usare Rails + Haml è molto più semplice includere la descrizione comando, fai semplicemente:

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

Questo è solo aggiungere la seguente riga alla fine dell'elemento.

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

Speravo davvero che avrebbe funzionato per me, ma purtroppo non ha funzionato.
turboladen

Ora sono più interessato a Djanto che a Rails, ma se incolli il tuo codice potrei provare a darti qualche suggerimento.
Andres Calle

3

Nel mio caso particolare, non ha funzionato perché includevo due versioni di jQuery. Uno per bootstrap, ma un altro (un'altra versione) per Google Charts.

Quando rimuovo il caricamento di jQuery per i grafici, funziona perfettamente.


3

Ho appena aggiunto:

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

sotto bootstrap.min.js e funziona.


3

Facciamo un esempio per mostrare come aggiungere le descrizioni comandi a qualsiasi elemento HTML nel documento.

NOTA:

Se questi esempi di tooltip non funzionano quando li inserisci nella tua pagina, allora hai un altro problema. Devi guardare cose come:

  • L'ordine degli script inclusi
  • Verifica se stai tentando di inizializzare elementi HTML che sono stati rimossi
  • Verifica se stai provando a chiamare metodi nei file JS che non stai più includendo
  • Verifica se stai includendo il file JS che fornisce le funzionalità di cui hai bisogno (non solo per i tooltip, ma tutti i componenti che usi nella pagina).

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

Il mancato funzionamento di QUALSIASI dei suddetti elementi può (e spesso fa) impedire il caricamento e / o l'esecuzione di javascript e ciò mantiene tutto bello e rotto.

ESEMPI DI LAVORO

Supponiamo che tu abbia un badge e desideri che mostri una descrizione comandi quando l'utente ci passa sopra.

HTML originale:

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

Descrizioni comandi Bootstrap semplici

Se stai creando tooltip per un elemento HTML e stai usando semplici tooltip Bootstrap, sarai responsabile di chiamare gli inizializzatori del tooltip con il tuo codice JavaScript.

PRIMA

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

DOPO

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

initializer

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

Descrizioni dei modelli di Bootstrap (come INSPINIA)

Se si utilizza un modello bootstrap (come INSPINIA), si include uno script di supporto per supportare le funzionalità del modello:

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

Nel caso di INSPINIA, lo script incluso inizializza automaticamente tutte le descrizioni comandi eseguendo il seguente codice javascript al termine del caricamento del documento:

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

Per questo motivo, NON è necessario inizializzare manualmente le descrizioni dei comandi in stile INSPINIA. Ma devi formattare i tuoi elementi in un modo specifico. Gli sguardi di inizializzazione per gli elementi HTML con tooltip-demoin classattributo, quindi chiama il tooltip()metodo per inizializzare qualsiasi bambino elementi che hanno l'attributo data-toggle="tooltip"definito.

Per il nostro esempio distintivo, collocare un elemento esterno attorno ad esso (come una <div>o <span>) che ha class="tooltip-demo", quindi posizionare i data-toggle, data-placemente titlegli attributi per il suggerimento effettiva all'interno dell'elemento che è il distintivo. Modifica l'HTML originale dall'alto per assomigliare a questo:

PRIMA

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

DOPO

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

initializer

None

Si noti che tutti gli elementi figlio all'interno di <span class="tooltip-demo"> dell'elemento avranno la descrizione comandi adeguatamente preparata. Potrei avere tre elementi figlio, tutti che necessitano di descrizioni comandi e inserirli in un contenitore.

Più elementi, ciascuno con una descrizione comandi

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

Il miglior uso per questo sarebbe quello di aggiungere class="tooltip-demo"a <td>o a più esterno <div>o<span> .

Semplici descrizioni di Bootstrap durante l'utilizzo di un modello

Se si utilizza INSPINIA, ma non si desidera aggiungere ulteriori tag esterni <div>o <span>per creare descrizioni comandi, è possibile utilizzare le descrizioni comandi Bootstrap standard senza interferire con il modello. In questo caso, sarai responsabile dell'inizializzazione delle descrizioni comandi. Tuttavia, è necessario utilizzare un valore personalizzato classnell'attributo per identificare gli elementi della descrizione comandi. Ciò eviterà che l'inizializzatore di Tooltip interferisca con gli elementi interessati da INSPINIA. Nel nostro esempio, usiamo standalone-tt:

PRIMA

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

DOPO

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

initializer

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

2

Se stai creando il tuo html che contiene il tooltip con javascript e poi lo inserisci nel documento, devi attivare il popover / tooltip DOPO aver inserito l'html nel documento, non al caricamento del documento ...


2

Devi inserire il tooltip javascript dopo l'html. come questo :

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

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

</script> 

Oppure usa $ (documento). Già:

$(document).ready(function() {

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

});

</script>

Il tooltip non funziona perché hai inserito il tooltip html prima del javascript , quindi non sanno se esiste un javascript per il tooltip. Secondo me, la sceneggiatura viene letta dall'alto verso il basso.


2

Ho avuto un problema simile e soprattutto se stai correndo in un contenitore di pulsanti come un contenitore di pulsanti verticale. In tal caso, devi impostare il contenitore come "corpo"

I have added a jsfiddle example

esempio



1

Da documenti bootstrap su tooltip

Le descrizioni comandi sono disponibili per motivi di prestazioni, quindi è necessario inizializzarle da soli. Un modo per inizializzare tutte le descrizioni comandi in una pagina sarebbe selezionarle tramite l'attributo di attivazione / disattivazione dei dati:

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

0

Aggiungi data-toggle="tooltip"a tutti gli elementi che vuoi con una descrizione comandi.


0

Devi fare quanto segue. Aggiungi il

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

codice da qualche parte sulla tua pagina (preferibilmente nella <head>sezione).

Aggiungi anche data-toggle: "tooltip"a tutto ciò che desideri abilitare con esso.


0

puoi usare Popper.js

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

E chiama la funzione tooltip:

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

-2

Alternativa rapida e leggera al plug-in Bootstrap tooltip:

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

Etichetta / testo devono essere racchiusi in un wrapper della classe "mytooltip" Questo wrapper deve avere un ID.

Dopo l'etichetta è presente il testo della descrizione comandi racchiuso in un div della classe "mytooltiptext" e un id costituito dall'id del wrapper padre + "_tttext". Altre opzioni per i selettori possono essere utilizzate.

Spero che sia d'aiuto.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.