2013-06-22 18 views
12

Nella pagina di documentazione Bootstrap, la descrizione comandi ha una firma di:Bootstrap tooltip dati ginocchiera

<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a> 

Che cosa significa il "data-Toggle attributo" fare in questo scenario?

So che è utile per le schede ma non vedo quale utilità possa apportare ai tooltip.


Chris,

Il tooltip deve essere inizializzato in modo esplicito come in:

$(document).ready(function(){ 
    $(".link").tooltip(); 
}); 

Partendo dal presupposto che la "a" tag ha una classe di "link". L'attributo "commutazione dati" non è obbligatorio perché il tooltip funzioni correttamente. Ma hai detto che è per il file JavaScript Bootstrap riconoscere se qualcosa è un suggerimento. Quindi non sembra logico che omettendo "data-toggle" faccia ancora funzionare il tooltip (a patto che ci sia l'inizializzazione esplicita). Potresti spiegare ulteriormente?

Edit # 2:

Dopo aver letto alcune pagine di emissione GitHub, penso che sono giunto alla seguente conclusione (che è la mia ipotesi migliore).

Originariamente, nelle versioni precedenti di Bootstrap, la firma tooltip era:

<a href="#" rel="tooltip" title="first tooltip">hover over me</a> 
... 
<a href="#" rel="tooltip" title="first tooltip">hover over me again!</a> 

E gli sviluppatori potrebbe fare:

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

Per attivare tutti tooltip in una sola volta (dal momento che ogni descrizione comando richiede un inizializzazione per funzionare). In altre parole, era solo un modo conveniente per identificare tutti i tooltip in modo da poter usare jQuery per attivarli tutti.

Ma rel = "tooltip" non ha convalidato HTML5, quindi la gente ha iniziato a suggerire l'uso di data-toggle = "tooltip" perché Bootstrap utilizza già l'interruttore dati per altri componenti e dati- * è valido in HTML5.

Quindi, la mia ipotesi è che non vi è alcun significato o scopo semantico speciale per data-toggle = "tooltip" diverso da quello di fornire un modo conveniente per identificare tutti i tooltip.

Si noti che è possibile identificare anche i suggerimenti utilizzando ID o classe, ma perché non attivare tutti i tooltip contemporaneamente (domanda retorica)?

+0

ornitorinco, se siete venuti su con una risposta a la tua domanda, gentilmente aggiungila come una nuova risposta (modulo in fondo alla pagina) anziché aggiungerla alla domanda stessa. – Lemmings19

risposta

13

Dopo aver letto alcune pagine di rilascio di GitHub, penso di essere giunto alla seguente conclusione (che è la mia ipotesi migliore).

Originariamente, nelle versioni precedenti di Bootstrap, la firma tooltip era:

<a href="#" rel="tooltip" title="first tooltip">hover over me</a> 
... 
<a href="#" rel="tooltip" title="first tooltip">hover over me again!</a> 

E gli sviluppatori potrebbe fare:

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

per attivare tutte le descrizioni comandi in una sola volta (dal momento che ogni suggerimento richiede un'inizializzazione lavoro). In altre parole, era solo un modo conveniente per identificare tutti i tooltip in modo da poter usare jQuery per attivarli tutti.

Ma rel = "tooltip" non ha convalidato HTML5, quindi la gente ha iniziato a suggerire l'uso di data-toggle = "tooltip" perché Bootstrap utilizza già l'interruttore dati per altri componenti e dati- * è valido in HTML5.

Quindi, la mia ipotesi è che non vi è alcun significato o scopo semantico speciale per data-toggle = "tooltip" diverso da quello di fornire un modo conveniente per identificare tutti i tooltip.

Si noti che è possibile identificare i tooltip utilizzando ID o classe, ma perché non attivare tutti i tooltip contemporaneamente (domanda retorica)?

1

Hanno scelto di utilizzare data-toggle come indicatore nel loro JavaScript per quando qualcosa è un suggerimento. Quando il file JS dei tooltips vede l'attributo data-toggle="tooltip", sa di avviare ed eseguire.

Un approccio più comune potrebbe essere quello di utilizzare una classe (<a href="#" class="tooltip" title="first tooltip">hover over me</a>), ma hanno attribuito l'attributo data-*. Fa la stessa cosa, funziona e philisophic, gli attributi data-* sono stati progettati per la manipolazione di JavaScript, quindi suppongo che sia opportuno mantenerlo libero dalla classe.

+0

Sai, guardando attraverso lo script su GitHub, sono in perdita. Non lo vedo referenziato da nessuna parte nel codice. Quindi ... –

+0

Il miglior riferimento che riesco a trovare è: https://github.com/twitter/bootstrap/pull/3031 – platypus

+0

Penso di avere una spiegazione. Vedi la seconda modifica sopra. – platypus

5

io uso questo:

<script> 
    $('[title]').tooltip(); 
</script> 

seleziona tutti gli elementi in cui è l'attributo titolo definito, e sostituisce il comportamento tooltip predefinito con il bootstrap uno ..

Problemi correlati