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>