Tooltips utili Tutorial e plugin jQuery

Il suggerimento è un elemento comune dell'interfaccia utente grafica. Viene utilizzato insieme a un cursore, di solito un puntatore del mouse. L'utente posiziona il cursore su un elemento, senza fare clic su di esso, e potrebbe apparire un suggerimento: una piccola "casella al passaggio del mouse" con informazioni sull'elemento su cui si passa il mouse.

Ho compilato alcuni tutorial e plugin jQuery per i suggerimenti.

1. TinyTips - Plugin jQuery leggero per suggerimenti

TinyTips è un plug-in jQuery molto leggero che offre la possibilità di aggiungere suggerimenti a praticamente qualsiasi elemento di una pagina. Accuratamente documentato e design friendly.

2. Tagging di foto in stile Flickr utilizzando jQuery

jQuery Photo Tagger arriva a circa 1.000 righe di codice. Pertanto, puoi controllare la pagina del progetto o provare tu stesso la demo online. Si noti che è necessario tenere premuto il tasto CTRL quando si fa clic con il mouse per creare l'hotspot.

Dimostrazione | Scarica

3. Plugin jQuery TipTip Custom Tooltip con zero immagini

TipTip utilizza l'attributo title proprio come fa il tooltip del browser nativo. Tuttavia, il titolo verrà copiato e quindi rimosso dall'elemento quando si utilizza TipTip in modo che il suggerimento del browser non venga visualizzato.
TipTip genera solo un set di elementi popup in totale, invece di generare un set di elementi popup per ciascun elemento con TipTip applicato ad esso. Questo aiuta a velocizzare le cose e riduce i tempi di elaborazione. Gli elementi generati sono tutti elementi div e vengono aggiunti alla fine dell'elemento body.

4. Come creare le nuove annotazioni visive con CSS3

ZURB ci ha insegnato come creare le nuove annotazioni visive. La soluzione non era tecnicamente troppo complessa. Con Notable, hanno abbracciato il concetto di grazioso degrado: sfruttano le nuove tecniche CSS che degradano in modo pulito ai browser più vecchi.

Demo

5. Mostra i tuoi collegamenti come un elenco a discesa con Pluralink

Pluralink è un fantastico plugin javascript per organizzare più link nel tuo testo.

6. Effetto al passaggio del mouse in scala di grigi con CSS e jQuery

L'effetto al passaggio del mouse in scala di grigi con CSS e jQuery si basa su CSS Sprite e poche righe di jQuery, ma richiede un po' di preparazione prima che possa essere implementato. Non è raccomandato per progetti su larga scala e probabilmente è il migliore per la visualizzazione di pezzi di portfolio.

7. Dai un'occhiata più da vicino con AnythingZoomer jQuery Plugin

Hai una piccola area. Passaci sopra con il mouse. Viene visualizzata un'area che ti offre uno sguardo più da vicino ingrandito. Questo è un plugin jQuery che lo fa. Non ho intenzione di dirti per cosa dovresti usarlo o elaborare scenari di casi d'uso. La tua creatività può aiutarti in questo.

Demo

8. Crea una descrizione comando ricca di contenuti con JSON e jQuery

Questo tutorial dimostrerà come creare descrizioni comandi basate su jQuery, con informazioni estratte da un array JSON.

Demo

9. Sostituisci la descrizione comando predefinita con la descrizione comando Pretty (mb).

(mb)Tooltip è un bellissimo tooltip per la tua pagina web in jQuery.

Scarica

10. Captify Visualizza le graziose didascalie delle immagini vengono visualizzate al passaggio del mouse

Captify è un plugin per jQuery scritto da Brian Reavis per visualizzare semplici e graziose didascalie delle immagini che appaiono al rollover. È stato testato su Firefox, Chrome, Safari e il disgraziato Internet Explorer. Captify è stato ispirato da ImageCaptions, un altro plugin jQuery per la visualizzazione di didascalie come queste.

11. Visualizza in anteprima le immagini con imgPreview jQuery Plugin

Peter Higgins ha creato Dojo Zoomer. È diviso in 3 pannelli. Passando il mouse sopra l'immagine nel pannello di sinistra, il pannello di destra mostra dinamicamente la parte ritagliata dell'immagine, in modo che tu possa concentrarti esplicitamente sulla parte dell'immagine principale che ti interessa.

12. Lente di ingrandimento dell'immagine Javascript jQuery sotto GPL

JQZoom è un ingranditore di immagini javascript costruito nella parte superiore del popolare framework javascript jQuery. jQzoom è uno script fantastico e davvero facile da usare per ingrandire ciò che desideri.

13. Semplici tooltip trasparenti con jQuery e CSS

I suggerimenti CSS sono molto popolari nel web design moderno e contrariamente alla credenza popolare è davvero facile crearli, specialmente con uno dei framework javascript così popolari.

Demo

14. Magic Toolbox – Strumenti Javascript e Flash Image Zoom

Magic Toolbox ha creato 2 incredibili strumenti per lo zoom delle immagini javascript ( Magic Zoom e Magic Magnify ). Magic Zoom è uno strumento di zoom JavaScript. È il modo migliore per visualizzare le immagini con dettagli incredibili.

15. Prototip 2: crea facilmente bellissime descrizioni comandi

Prototip ti consente di creare facilmente tooltip sia semplici che complessi utilizzando il framework javascript Prototype.

Demo

16. Tooltip e anteprima dell'immagine più semplici utilizzando jQuery

La descrizione comando più semplice e l'anteprima dell'immagine è uno di quei popup a bolle simili a descrizioni comandi che vengono visualizzati quando si passa sopra un collegamento o una miniatura.

Demo

17. Suggerimenti per le bolle popup in stile Coda con jQuery

Coda è uno dei nuovi strumenti di sviluppo web per Mac ed è popolare tra designer e sviluppatori.

18. Contrassegna la regione dell'immagine cliccabile Mostra il suggerimento a comparsa

Taggify è un widget web che permette a blogger ed editori di migliorare i propri siti aggiungendo tooltip di immagini collegati a determinate richieste di immagini.
Demo

19. Tooltip Bubble discreti con Javascript e CSS

I suggerimenti a bolle sono un modo semplice per aggiungere (tramite un po' di CSS e javascript) suggerimenti di fantasia con una forma a fumetto a qualsiasi pagina web.

Demo

20. Suggerimenti per la dissolvenza in apertura e in chiusura per prototipi e scriptaculous

CoolTips è una tecnica di sostituzione dei tooltips del browser Web JavaScript discreta e leggera.
CoolTips viene utilizzato per sostituire i tradizionali tooltips del browser web. I suggerimenti ottengono il contenuto dell'attributo title, quindi è completamente discreto. CoolTips è una classe OO basata sui framework Prototype JS e script.aculo.us.

21. Titoli dolci Descrizioni comandi trasparenti e sbiadite

Sweet Titles Fading Tooptips non è un knock-off dei NICE Titles né sta cercando di migliorare il tentativo rivisto di Dunstan. E sicuramente non viene strappato da uno di quegli script infestati dai gestori di eventi di Dynamic Drive .

Demo

22. Prototip La maggior parte delle caratteristiche Tooltip per il prototipo

Prototip ti consente di creare facilmente tooltip sia semplici che complessi utilizzando il framework javascript Prototype. Se usi anche Scriptaculous puoi persino aggiungere degli effetti carini.

Demo

23. Suggerimenti per comandi leggeri BoxOver DHTML/Javascript

BoxOver utilizza javascript / DHTML per mostrare i suggerimenti su un sito Web. L'implementazione dei suggerimenti, tuttavia, non richiede alcuna conoscenza di DHTML o javascript. Ci sono molte modifiche che possono essere impostate per personalizzarlo in base alle tue esigenze impostando l'attributo "titolo" di un tag.