I tooltip sono fantastici, semplicemente non si può negarlo. Forniscono un modo semplice, prevedibile e diretto per fornire agli utenti informazioni utili e sensibili al contesto e sembrano interessanti.
Siamo tutti d'accordo su quanto siano grandi i tooltip, ma il modo in cui li implementiamo può differire notevolmente. Se sei al punto di partenza, alla ricerca di qualche suggerimento per il tuo progetto attuale, sei nel posto giusto. Abbiamo venticinque diverse opzioni che rientrano in due categorie: JavaScript e CSS. Indipendentemente dal metodo che stai cercando di utilizzare, abbiamo le migliori tecniche disponibili, che potresti voler migliorare utilizzando le tecniche di classe OOP come le classi JavaScript che utilizzano il linguaggio di programmazione JS ++ di Roger Poon.
JavaScript e jQuery
Tipped - La descrizione di jQuery
Saltiamo l'idea di salvare il meglio per ultimo. Se non vuoi setacciare venticinque diverse opzioni e capire qual è il migliore, basta scaricare Tipped. I tooltip sono interessanti, facili da implementare e ci sono un sacco di opzioni tra cui scegliere. Avrai difficoltà a superare questo.
Opentip - Il tooltip gratuito
Opentip è un altro plugin tooltip di alto livello. Come Tipped, ci sono un sacco di opzioni in modo da poter fare praticamente tutto quello che vuoi con loro. Il design degli stessi suggerimenti mostra un po 'più di carattere rispetto a quelli di Tipped, che potrebbe o meno essere una buona cosa per il tuo progetto.
Tooltip di Javascript
Semplice ma efficace. Questo ti offre opzioni di posizionamento, consente l'incorporamento di immagini e può essere attivato da un numero di eventi diversi.
SkinnyTip JavaScript Tooltip Library
Questa non è l'opzione più attraente, ma è piuttosto leggera. L'intera libreria è inferiore a 10kb, quindi non devi preoccuparti di rallentare la pagina. Sembra certamente un po 'antico, ma funziona ancora.
qTip - Il plugin per tooltip di jQuery
qTip funziona in tutti i principali browser, si degrada piacevolmente quando JavaScript è disabilitato, è facilmente posizionato e presenta animazioni e angoli arrotondati. È un plugin davvero solido e consiglio vivamente di provarlo. Dai anche un'occhiata alla versione 2.
Simpletip - Un semplice plugin per tooltip jQuery
Simpletip è esattamente come pubblicizzato. Non sembra solo semplice, è anche super facile da usare. Ci sono anche alcuni effetti di caricamento visivo che puoi sfruttare se vuoi andare oltre.
Tooltipster - Il plug-in ToolQuick di jQuery
Elimina i plug-in che sono presenti da Netscape. Tooltipster è un plugin tooltip moderno, valido, HTML5 valido. È leggero, veloce, browser-friendly e facilmente abbinabile ai CSS.
Descrizione comando - Interfaccia utente jQuery
Gli utenti di jQuery non devono andare lontano per trovare suggerimenti utili e robusti, sono integrati nell'interfaccia utente di jQuery. Sono davvero semplici e le probabilità sono che troverai un sacco di altre cose nella libreria che renderanno il tuo sito migliore.
TipTip Plugin jQuery
Adoro tutto ciò che fa Drew Wilson. È il ragazzo dietro a Screeny, Space Box, Pictos e un sacco di altre cose interessanti. Il fatto che abbia creato questo plugin è sufficiente per farmi scaricare. A meno di 3.5kb, questa cosa è super leggera e super straordinaria.
Tooltipsy
Tooltipsy mette la funzionalità nelle mani di JavaScript, quindi usa CSS chiaro e facilmente personalizzabile per tutto il resto. Cambia l'aspetto, la dimensione, l'animazione; impazzire e renderlo tuo.
brillo
Tipsy ti offre tooltip minimali ed eleganti senza un po 'di peluria. Ha tutte le caratteristiche di cui hai bisogno, come il posizionamento e la dissolvenza, e nulla di superfluo che non potrai mai utilizzare.
Tooltip reattivo e mobile-friendly
Questo è un suggerimento per la prossima generazione di web design. Si adatta facilmente a qualsiasi finestra di dimensioni e visualizza in modo intelligente il suggerimento in una dimensione e posizione ottimizzata per la schermata corrente. Se stai facendo un design reattivo, e dovresti esserlo, dovresti esaminare le descrizioni rapide.
aToolTip - Un semplice toolkit jQuery di Ara Abcarians
aToolTip ti consente di avere un suggerimento che si muove costantemente con il cursore o che rimane posizionato sull'elemento partner. Ha hover o opzioni di clic, è sotto 4kb e ha funzioni di callback.
Colortip - un plug-in di toolpoint jQuery
Il download di un plugin tooltip preinstallato è interessante, ma perché non fare il grande passo e imparare a costruirne uno? Colortip è un download gratuito, ma fa parte di un approfondito tutorial passo-passo per creare il plugin da zero.
ChillTip Plug-in jQuery
ChillTip è un notevole plugin di tooltip flessibile che consente di implementare i suggerimenti in diversi modi. Può essere utilizzato con span, img, attributi di ancoraggio e? Praticamente qualsiasi altra cosa che utilizza l'attributo title.?
Pop! Menu pop semplici con jQuery
Questo non è abbastanza un suggerimento, ma è strettamente correlato quindi ho pensato di includerlo comunque. Invece di avere un piccolo pop-up al passaggio del mouse, questo ti dà un piccolo menu a tendina cliccabile in cui puoi nascondere informazioni extra.
Tooltips CSS
Tooltips CSS
Per iniziare la sezione del tooltip CSS, ci rivolgiamo allo sviluppatore principale David Walsh. Questo tutorial si concentra più su come creare la classica forma del tooltip con i CSS e meno su come implementare con successo e puro tooltip CSS.
Tooltip CSS
Questo è uno strumento davvero eccezionale che ti permette di costruire facilmente semplici suggerimenti CSS semplicemente compilando alcuni campi. Puoi personalizzare completamente l'aspetto e i contenuti utilizzando il semplice modulo, quindi prendi il codice e incollalo nel tuo progetto.
Tooltips sexy con solo CSS
Un bel tutorial su Six Revisions per la creazione di tooltip davvero robusti e attraenti usando CSS. Lo stile è una sorta di finestra di dialogo di avviso con un'icona e una scatola colorata.
Tooltip CSS
Un semplice, leggero, cross-browser, puro suggerimento CSS. È un download gratuito e occupa solo un singolo measly kb.
CSS Bubble Tooltips
Un tooltip CSS semplice e frizzante. Non molto qui, ma funziona bene!
Facile CSS Tooltip
Questo è chiamato? Easy CSS Tooltip? per una ragione. Occorrono quattro righe di codice: una riga di HTML e tre righe di CSS. Questo è tutto! Non diventa molto più facile la gente.
CSS Tooltips e Speech Bubbles
In questo articolo, Konigi sperimenta due diversi metodi per fornire tooltips CSS puri. Il primo usa il titolo e il secondo usa uno span.
CSS Tooltips di Adam Whitcroft
Qui Adam Whitcroft ti insegna a costruire tooltip con attributi di dati. Potrebbe sembrare un po 'spaventoso, ma in realtà sono davvero facili da usare. Assicurati di dare a questo una lettura.
Pure CSS Tooltips - Trezy.com
Qui l'autore presenta una serie di obiettivi solidi come la compatibilità IE8 e HTML minimale, quindi mostra come ha costruito alcuni tooltips CSS puri che soddisfano questi obiettivi. Se si desidera un tooltip CSS che può essere utilizzato in un ambiente cross-browser professionale, questa è una buona lettura.
Che cosa usi per le descrizioni?
Ora che hai visto queste venticinque risorse del tooltip, è ora di uscire e iniziare a creare tooltip! Lascia un commento qui sotto e dicci quale risorsa ti piace di più o se ne trovi una che non è elencata sopra.