JqueryUI - Tooltip
Il widget tooltip di jQueryUI sostituisce i tooltip nativi. Questo widget aggiunge nuovi temi e consente la personalizzazione. Per prima cosa, cerchiamo di capire cosa sono i suggerimenti? Le descrizioni comandi possono essere associate a qualsiasi elemento. Per visualizzare i suggerimenti, è sufficiente aggiungere l' attributo del titolo agli elementi di input e il valore dell'attributo del titolo verrà utilizzato come suggerimento. Quando si passa con il mouse sull'elemento, l'attributo del titolo viene visualizzato in un piccolo riquadro accanto all'elemento.
jQueryUI fornisce tooltip()metodo per aggiungere il suggerimento a qualsiasi elemento su cui desideri visualizzare il suggerimento. Ciò fornisce un'animazione di dissolvenza per impostazione predefinita per mostrare e nascondere il suggerimento, rispetto alla semplice attivazione / disattivazione della visibilità.
Sintassi
Il tooltip() metodo può essere utilizzato in due forme:
$ (selettore, contesto) .tooltip (opzioni) Metodo
Il metodo tooltip (opzioni) dichiara che un tooltip può essere aggiunto a un elemento HTML. Il parametro delle opzioni è un oggetto che specifica il comportamento e l'aspetto del suggerimento.Sintassi
$(selector, context).tooltip(options);Puoi fornire una o più opzioni alla volta utilizzando l'oggetto Javascript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:
$(selector, context).tooltip({option1: value1, option2: value2..... });La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:
| Sr.No. | Opzione e descrizione |
|---|---|
| 1 | soddisfare
Questa opzione rappresenta il contenuto di un suggerimento. Per impostazione predefinita, il suo valore èfunction returning the title attribute. Option - content Questa opzione rappresenta il contenuto di un suggerimento. Per impostazione predefinita, il suo valore èfunction returning the title attribute. Questo può essere di tipo -
Syntax |
| 2 | Disabilitato
Questa opzione, se impostata su true, disabilita il suggerimento. Per impostazione predefinita, il suo valore èfalse. Option - disabled Questa opzione, se impostata su true, disabilita il suggerimento. Per impostazione predefinita, il suo valore èfalse. Syntax |
| 3 | nascondere
Questa opzione rappresenta l'effetto di animazione quando si nasconde il suggerimento. Per impostazione predefinita, il suo valore ètrue. Option - hide Questa opzione rappresenta l'effetto di animazione quando si nasconde il suggerimento. Per impostazione predefinita, il suo valore ètrue. Questo può essere di tipo -
Syntax |
| 4 | elementi
Questa opzione indica quali elementi possono mostrare i suggerimenti. Per impostazione predefinita, il suo valore è[title]. Option - items Questa opzione indica quali elementi possono mostrare i suggerimenti. Per impostazione predefinita, il suo valore è[title]. Syntax |
| 5 | posizione
Questa opzione decide la posizione del tooltip rispetto all'elemento target associato. Per impostazione predefinita, il suo valore èfunction returning the title attribute. I valori possibili sono: my, at, of, collision, using, within. Option - position Questa opzione decide la posizione del tooltip rispetto all'elemento target associato. Per impostazione predefinita, il suo valore èfunction returning the title attribute. I valori possibili sono: my, at, of, collision, using, within. Syntax |
| 6 | spettacolo
Questa opzione rappresenta come animare la visualizzazione del tooltip. Per impostazione predefinita, il suo valore ètrue. Option - show Questa opzione rappresenta come animare la visualizzazione del tooltip. Per impostazione predefinita, il suo valore ètrue. Questo può essere di tipo -
Syntax |
| 7 | tooltipClass
Questa opzione è una classe che può essere aggiunta al widget dei suggerimenti per suggerimenti come avvertimenti o errori. Per impostazione predefinita, il suo valore ènull. Option - tooltipClass Questa opzione è una classe che può essere aggiunta al widget dei suggerimenti per suggerimenti come avvertimenti o errori. Per impostazione predefinita, il suo valore ènull. Syntax |
| 8 | traccia
Questa opzione quando è impostata su true , il tooltip segue / traccia il mouse. Per impostazione predefinita, il suo valore èfalse. Option - track Questa opzione quando è impostata su true , il tooltip segue / traccia il mouse. Per impostazione predefinita, il suo valore èfalse. Syntax |
La sezione seguente ti mostrerà alcuni esempi funzionanti della funzionalità dei suggerimenti.
Funzionalità predefinita
L'esempio seguente mostra un semplice esempio di funzionalità del tooltip che non passa parametri al file tooltip() metodo.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$("#tooltip-1").tooltip();
$("#tooltip-2").tooltip();
});
</script>
</head>
<body>
<!-- HTML -->
<label for = "name">Name:</label>
<input id = "tooltip-1" title = "Enter You name">
<p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
I also have a tooltip</a></p>
</body>
</html>Salviamo il codice sopra in un file HTML tooltipexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:
Nell'esempio precedente, passa con il mouse sui link sopra o utilizza il tasto Tab per evidenziare ogni elemento.
Uso dei contenuti, traccia e disabilitato
Il seguente esempio mostra l'utilizzo di tre importanti opzioni (a) content (b) track e (c) disabled nella funzione tooltip di JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#tooltip-3" ).tooltip({
content: "<strong>Hi!</strong>",
track:true
}),
$( "#tooltip-4" ).tooltip({
disabled: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<label for = "name">Message:</label>
<input id = "tooltip-3" title = "tooltip"><br><br><br>
<label for = "name">Tooltip disabled for me:</label>
<input id = "tooltip-4" title = "tooltip">
</body>
</html>Salviamo il codice sopra in un file HTML tooltipexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:
Nell'esempio sopra, il contenuto della descrizione comando della prima casella viene impostato utilizzando l' opzione contenuto . Puoi anche notare che il suggerimento segue il mouse. Il suggerimento per la seconda casella di input è disabilitato.
Uso della posizione
Il seguente esempio mostra l'utilizzo di option position nella funzione tooltip di JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
body {
margin-top: 100px;
}
.ui-tooltip-content::after, .ui-tooltip-content::before {
content: "";
position: absolute;
border-style: solid;
display: block;
left: 90px;
}
.ui-tooltip-content::before {
bottom: -10px;
border-color: #AAA transparent;
border-width: 10px 10px 0;
}
.ui-tooltip-content::after {
bottom: -7px;
border-color: white transparent;
border-width: 10px 10px 0;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#tooltip-7" ).tooltip({
position: {
my: "center bottom",
at: "center top-10",
collision: "none"
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<label for = "name">Enter Date of Birth:</label>
<input id = "tooltip-7" title = "Please use MM.DD.YY format.">
</body>
</html>Salviamo il codice sopra in un file HTML tooltipexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:
Nell'esempio sopra, la posizione della descrizione comando è impostata sopra la casella di input.
$ (selector, context) .tooltip ("action", [params])
Il metodo tooltip (action, params) può eseguire un'azione sugli elementi tooltip, come disabilitare il tooltip. Ilaction è specificato come una stringa nel primo argomento e, facoltativamente, uno o più params può essere fornito in base all'azione data.
Fondamentalmente, qui le azioni non sono altro che metodi jQuery che possiamo usare sotto forma di stringa.
Sintassi
$(selector, context).tooltip ("action", [params]);La tabella seguente elenca le azioni per questo metodo:
| Sr.No. | Azione e descrizione |
|---|---|
| 1 | vicino()
Questa azione chiude la descrizione comando. Questo metodo non accetta argomenti. Action - close() Questa azione chiude la descrizione comando. Questo metodo non accetta argomenti. Syntax |
| 2 | distruggere()
Questa azione rimuove completamente la funzionalità dei suggerimenti. Questo riporterà l'elemento al suo stato pre-inizializzazione. Questo metodo non accetta argomenti. Action - destroy() Questa azione rimuove completamente la funzionalità dei suggerimenti. Questo riporterà l'elemento al suo stato pre-inizializzazione. Questo metodo non accetta argomenti. Syntax |
| 3 | disattivare()
Questa azione disattiva il suggerimento. Questo metodo non accetta argomenti. Action - disable() Questa azione disattiva il suggerimento. Questo metodo non accetta argomenti. Syntax |
| 4 | abilitare()
Questa azione attiva la descrizione comando. Questo metodo non accetta argomenti. Action - enable() Questa azione attiva la descrizione comando. Questo metodo non accetta argomenti. Syntax |
| 5 | Aperto()
Questa azione apre la descrizione comando a livello di codice. Questo metodo non accetta argomenti. Action - open() Questa azione apre la descrizione comando a livello di codice. Questo metodo non accetta argomenti. Syntax |
| 6 | opzione (optionName)
Questa azione ottiene il valore associato a optionName per la descrizione comando . Questo metodo non accetta argomenti. Action - option( optionName ) Questa azione ottiene il valore associato a optionName per la descrizione comando . Questo metodo non accetta argomenti. Syntax |
| 7 | opzione()
Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni del suggerimento corrente. Questo metodo non accetta argomenti. Action - option() Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni del suggerimento corrente. Questo metodo non accetta argomenti. Syntax |
| 8 | opzione (optionName, value)
Questa azione imposta il valore dell'opzione tooltip associata all'opzione optionName specificato . Action - option( optionName, value ) Questa azione imposta il valore dell'opzione tooltip associata all'opzione optionName specificato . Syntax |
| 9 | opzione (opzioni)
Questa azione imposta una o più opzioni per il suggerimento. Action - option( options ) Questa azione imposta una o più opzioni per il suggerimento. Syntax |
| 10 | aggeggio()
Questa azione restituisce un oggetto jQuery contenente l'elemento originale. Questo metodo non accetta argomenti. Action - widget() Questa azione restituisce un oggetto jQuery contenente l'elemento originale. Questo metodo non accetta argomenti. Syntax |
Esempi
Vediamo ora un esempio usando le azioni della tabella sopra. L'esempio seguente mostra l'uso delle azioni disable e enable .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$("#tooltip-8").tooltip({
//use 'of' to link the tooltip to your specified input
position: { of: '#myInput', my: 'left center', at: 'left center' },
}),
$('#myBtn').click(function () {
$('#tooltip-8').tooltip("open");
});
});
</script>
</head>
<body style = "padding:100px;">
<!-- HTML -->
<a id = "tooltip-8" title = "Message" href = "#"></a>
<input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
<input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
</body>
</html>Salviamo il codice sopra in un file HTML tooltipexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:
Nell'esempio sopra, fai clic sul pulsante myBtn e viene visualizzato un suggerimento.
Gestione degli eventi sugli elementi del tooltip
Oltre al metodo tooltip (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati per un particolare evento. Questi metodi di evento sono elencati di seguito:
| Sr.No. | Metodo e descrizione dell'evento |
|---|---|
| 1 | create (evento, ui)
Attivato quando viene creato il suggerimento. Dove event è di tipo Event e ui è di tipo Object . Event - create(event, ui) Attivato quando viene creato il suggerimento. Dove event è di tipo Event e ui è di tipo Object . Syntax |
| 2 | close (evento, ui)
Si attiva quando il tooltip è chiuso. Di solito si attiva quando si esce dalla messa a fuoco o si lascia il mouse . Dove event è di tipo Event e ui è di tipo Object . Event - close(event, ui) Si attiva quando il tooltip è chiuso. Di solito si attiva quando si esce dalla messa a fuoco o si lascia il mouse . Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -
Syntax |
| 3 | open (evento, ui)
Si attiva quando viene visualizzato o mostrato il suggerimento. Di solito innescato sulla focusIn o passaggio del mouse . Dove event è di tipo Event e ui è di tipo Object . Event - open(event, ui) Si attiva quando viene visualizzato o mostrato il suggerimento. Di solito innescato sulla focusIn o passaggio del mouse . Dove event è di tipo Event e ui è di tipo Object. I valori possibili di ui sono:
Syntax |
Esempi
L'esempio seguente mostra l'utilizzo del metodo degli eventi durante la funzionalità dei suggerimenti. Questo esempio dimostra l'uso di eventi di apertura e chiusura .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$('.tooltip-9').tooltip({
items: 'a.tooltip-9',
content: 'Hello welcome…',
show: "slideDown", // show immediately
open: function(event, ui) {
ui.tooltip.hover(
function () {
$(this).fadeTo("slow", 0.5);
});
}
});
});
$(function() {
$('.tooltip-10').tooltip({
items: 'a.tooltip-10',
content: 'Welcome to TutorialsPoint…',
show: "fold",
close: function(event, ui) {
ui.tooltip.hover(function() {
$(this).stop(true).fadeTo(500, 1);
},
function() {
$(this).fadeOut('500', function() {
$(this).remove();
});
});
}
});
});
</script>
</head>
<body style = "padding:100px;">
<!-- HTML -->
<div id = "target">
<a href = "#" class = "tooltip-9">Hover over me!</a>
<a href = "#" class = "tooltip-10">Hover over me too!</a>
</div>
</body>
</html>Salviamo il codice sopra in un file HTML tooltipexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:
Nell'esempio sopra, il suggerimento per Hover over me! scompaiono immediatamente mentre il tooltip per Hover over me! si dissolve dopo una durata di 1000 ms.