Oltre 40 utili descrizioni comandi Script con CSS, JavaScript e jQuery
Un elemento dell'interfaccia utente interessante, tooltip (chiamato anche infotips) fanno apparire una piccola casella quando il il cursore del mouse è posizionato su un determinato testo o immagine con informazioni per quanto riguarda l'elemento che si libra sopra. In termini di esperienza utente, i tooltip forniscono agli utenti la fonte di informazioni più rapida e semplice senza dover cliccare nulla.
Anche se il modo più semplice per aggiungere suggerimenti al testo è usare il tag HTML o TITLE =””, ALT =””. Tuttavia, ci sono alcuni davvero interessanti descrizioni comandi e stili che è possibile creare con JavaScript e CSS usando gli script dei tooltips. Diamo un'occhiata.
CSS
Balloon.css - Balloon è una libreria CSS composto con SasS e LESS per mostrare un suggerimento interattivo. Il contenuto e la posizione del tooltip sono configurabili attraverso il dati- attributo. Puoi mostrare il suggerimento a sinistra, destra o sinistra-destra. Puoi persino aggiungi Emojis al contenuto. Balloon.css può essere installato tramite NPM e caricato da CDNJS.
Simptip - Realizzato con SasS che consente di riconfigura e ricompila il codice in base alle tue esigenze. La posizione e il contenuto del tooltip sono configurabili attraverso il nome della classe e il nome Dati-tooltip attributo. Simptip è disponibile come Pacchetto NPM, Yarn e Bower.
Hint.css - Una delle popolari librerie CSS per visualizzare tooltip, Hint.css è utilizzato da molti siti Web popolari come Fiverr, Webflow e Tridiv. A differenza delle altre due librerie CSS, Hint.css utilizza Aria-label Puoi configurare la dimensione e il colore attraverso i nomi delle classi usando la metodologia BEM. Hint.css è disponibile su NPM, Bower e CDNJS.
microtip - Un'altra fantastica libreria CSS per la creazione di tooltip con “Accessibilità” in mente, Microtip usi Aria-label tenere il contenuto del tooltip e dati- attributo per configurare la dimensione e la posizione del tooltip.
Usa la variabile CSS che ti permette di personalizzare il suggerimento con un semplice file CSS. Le variabili CSS sono già supportate in molti browser Web e mobili. Microtip è disponibile come pacchetto NPM, Yarn e CDN UNPkg.
Wenk - Sono solo 733 byte. Una libreria super leggera scritto in un modernissimo CSS usando CSSNext, LESS e SCSS così puoi personalizzare e ricompilare gli stili nel modo che preferisci. Wenk può essere scaricato da NPM, Yarn e dai seguenti servizi CDN gratuiti: rawgit.com e unpkg.com.
Tooltippy - Un altro libreria CSS leggera essendo solo circa 1 KB di dimensioni. Tooltippy include diversi temi pre-impostati per lo styling del tooltip. È stato scritto con un pre-processore CSS chiamato Stylus. Vedi le istruzioni su come puoi estendere o personalizzare questi temi.
ElegantTips - Questa libreria viene fornita con alcuni temi pre-costruiti che può essere cambiato con i nomi delle classi forniti. A differenza dell'altro le librerie che si basano su HTML5 dati- o il Aria-label attributo, ElegantTips richiede un elemento aggiuntivo aggiunto per formare il suggerimento. Questo ti permette di aggiungi letteralmente qualsiasi contenuto al suggerimento oltre il semplice testo.
Tootik - Non solo che questa libreria CSS fornisce il foglio di stile nei formati CSS, LESS e SasS, ma fornisce anche un GUI facile da usare per personalizzare il suggerimento. Puoi semplicemente copiare e incollare l'HTML generato da questo strumento. È così semplice.
VanillaJS
TippyJS - Realizzato da Popper.js, TippyJS viene fornito con un abbondanza di opzioni per configurare il suggerimento. Possiamo personalizzare le animazioni, la freccia del tooltip, la larghezza, le dimensioni, il tema e molto altro. Fornisce anche funzioni di richiamata con le quali è possibile eseguire una funzione quando il tooltip è mostrato e nascosto. Queste caratteristiche rendono TippyJS una delle nostre potenti librerie JavaScript sulla nostra lista per creare tooltip.
Darsain Tooltip - Questa libreria fornisce l'implementazione di base di un suggerimento. Tuttavia, fornisce ampie opzioni per configurare il comportamento del tootip e a set di nomi di classi per modificare l'aspetto del tooltip. Il tooltip funziona bene nei browser più vecchi come IE9 e, se necessario, IE8 con alcune modifiche.
Bubb - Bubb potrebbe essere adatto per gli utenti JavaScript avanzati. Usando il suo API estese, oltre alla visualizzazione di testo semplice, puoi aggiungere a livello di codice un contenuto HTML più complesso al suggerimento. È molto bello; puoi fare riferimento ai documenti con gli esempi.
bottone automatico - Contiene un'astrazione tecnica per creare qualcosa di simile “pops”, come un suggerimento, un popover e menu a discesa. TippyJS lo utilizza come base della libreria e viene utilizzato da grandi nomi sul Web come Bootstrap, Microsoft e Atlassian.
Tooltip YY - A differenza delle altre librerie, YY Tooltip non richiede di aggiungere un elemento HTML o attributi. Funziona completamente con JavaScript e il contenuto, la posizione e i colori sono definiti in un oggetto anziché in un elemento HTML. È perfetto da utilizzare in combinazione con un'applicazione web JavaScript completa.
Position.js - Un'altra eccellente libreria nativa JavaScript per creare descrizioni comandi, Position.js fornisce una GUI per configurare la funzione e semplicemente copia e incolla il codice generato lì. Position.js può essere utilizzato insieme a React.js o Vue.js.
Bezet Tooltip - Questa libreria fornisce 14 opzioni per visualizzare il suggerimento; come sul destra, sinistra, parte inferiore, sinistra-centro, destra-end, basso al centro, ecc. Oltre a ciò, è anche abbastanza intelligente da poterlo fare regola la posizione del tooltip in base allo spazio disponibile circondando il tooltip. Guarda la demo.
MouseTip - Questa libreria JavaScrtipt creerà a tooltip che si sposterà lungo la posizione del cursore. Il suggerimento è configurato con un non standard mousetip- attributo invece di usare l'HTML5 dati- attributo. Mousetip è disponibile come modulo NPM.
Internetips - Abbastanza simile a MousetTip, il tooltip generato da questa libreria segue la posizione del cursore. Tutto è configurato tramite l'oggetto JavaScript anziché HTML e il gli attributi sono anche costruiti per i browser moderni. È leggero e veloce.
MTip - Una libreria JavaScript per Tooltip con ottima compatibilità del browser. È compatibile con IE8, completamente personalizzabile tramite le Opzioni, ed è possibile aggiungere il Tooltip a qualsiasi elemento anche su un img (un elemento dell'immagine).
Bubblesee - una libreria JavaScript leggera che fornisce una funzionalità semplice di a “tooltip”. È facile utilizzare la libreria JavaScript senza opzioni complicate per personalizzare l'output. Un file Sass viene fornito se desideri modificare l'aspetto del suggerimento. Guarda la demo.
Tipfy - Costruito con la moderna sintassi JavaScript, ES6, Tipfy ha solo 2 KB di dimensione. La libreria fornisce due versioni di file: tipfy.min.js fornendo il copione con sintassi ES6 moderna, e tipfy.es5.min.js se hai bisogno di compatibilità con i browser più vecchi. Utilizza dati- attributo per personalizzare il suggerimento; il dati-tipfy-side, per esempio, è usato per impostare la direzione del tooltip e usare Dati-tipfy-text attributo per aggiungere il contenuto del tooltip.
jQuery
Tooltipster - Questa libreria offre ampie opzioni per personalizzare quasi tutto come il tema, animazione, touch-support, contenuto, trigger open-and-close, ecc. Fornisce anche listener di eventi personalizzati e callback che consentono agli sviluppatori di estendere il tooltip con funzioni personalizzate. Inoltre, essendo un plugin jQuery, il il tooltip funzionerebbe con browser più vecchi come IE6, a seconda della versione di jQuery in uso.
Protip - Un altro esteso plugin jQuery, Protip supporta 49 posizioni, HTML per il contenuto del tooltip, il supporto per le icone, i callback personalizzati, e molto di più. Protip fornisce una GUI che consente di personalizzare facilmente il tooltip.
SuperConsiglio - Questo plugin jQuery offre anche opzioni e API che offrono agli sviluppatori diversi modi per implementare i tooltip. Supporta navigazione da tastiera; facendo apparire il popup quando si naviga con gli elementi linguetta tastiera. PowereTip è disponibile come modulo NPM. Può essere usato con RequireJS e Browserify.
Tooltip accessibile di Aria - Un plug-in jQuery con funzionalità di accessibilità integrata, il suggerimento è progettato per visualizzare una finestra di dialogo con un titolo, una multilinea di testo e un pulsante di chiusura. È uno dei suoi sulla nostra lista.
TipsJS - Un semplice plug-in di jQuery, che tuttavia presenta caratteristiche piuttosto peculiari. Il il contenuto del tooltip è impostato con a Dati-tooltip attributo. Inoltre, possiamo anche avvolgere il contenuto con caratteri speciali per formattare il contenuto in modo simile alla formattazione Markdown. Possiamo usare * per rendere il contenuto audace, ~ per italico, e ^ per voce.
Dark Tooltip - Questa libreria fornisce alcune funzioni davvero utili per potenziare il suggerimento. Ad esempio, possiamo aggiungere un pulsante conferma - Sì e No, attenua lo sfondo mentre viene visualizzato il suggerimento e aggiungi elementi HTML al contenuto. Penso che dovresti davvero controllare la pagina demo.
Tooltip di Aria - Un altro tooltip con funzionalità di accessibilità integrata, questo plugin jQuery è compatibile con WAI-ARIA 1.1. È reattivo in un modo che puoi fornire diverse configurazioni per diverse dimensioni di viewport. Aria Tooltip è disponibile come un modulo NPM chiamato t-aria-tooltip.
Toolbar.js - Mentre l'altro plugin jQuery può mostrare solo testo semplice o contenuto HTML all'interno di un suggerimento, questo Il plugin jQuery crea una barra degli strumenti. Il suggerimento conterrebbe due o più collegamenti con un'icona su cui tipicamente eseguirà un'azione clic, come qualsiasi barra degli strumenti. Controlla la documentazione e gli esempi.
VueJS
V-Tooltip - V-Tooltip è un componente Vue.js alimentato da Popper.js sotto il cofano. Fornisce a nuova direttiva denominata v-tooltip che può essere aggiunto a qualsiasi elemento per creare un suggerimento. Il v-tooltip può contenere il contenuto del tooltip o le Opzioni. A parte l'abitudine v-tooltip direttiva, è anche possibile aggiungere il suggerimento con il v-popover componente. Con questo componente, puoi aggiungi contenuti più complessi nel suggerimento con componente Vue.js o HTML.
Vue-Bulma Tooltip - Un componente Vue.js per creare tooltip basato su Bulma UI Framework. Questa libreria fa parte del componente di Vue Bulma. Ma il Il componente tooltip è disponibile come un modulo NPM chiamato vue-Bulma-tooltip che puoi usare questo come componenti autonomi.
Vue-direttiva-Tooltip - Nel complesso è simile al componente V-Tooltip basato su Popper.js e fornisce la stessa direttiva chiamata v-tooltip. Tuttavia, non sembra fornire il v-popover componente.
Vue-Tippy - Questa libreria avvolge Tippy.js in un componente Vue.js. È dotato di una direttiva Vue.js personalizzata chiamata v-tippy funziona come un attributo HTML; possiamo aggiungere il contenuto per la descrizione del comando o le opzioni per personalizzarlo. Inoltre rende a componente personalizzato Vue.js sul contenuto del tooltip che utilizza il html opzione.
VueJS-Popover - Vue.js personalizzato con una direttiva personalizzata chiamata v-popover e due componenti personalizzati vale a dire
Vue-Hint - Un plugin Vue.js che include Hint.css. Le caratteristiche del plugin v-suggerimento-css direttiva per aggiungere il suggerimento. esso porta lo stesso set di opzioni di Hint.css, quindi puoi aggiungerli come un oggetto JavaScript o un modificatore di Vue.js.
ReactJS
Reagire con Joyride - Un componente React per visualizzare un insieme di tooltip che lo faranno guida i nuovi utenti a familiarizzare con la tua nuova applicazione.
Reagire Floater - Questa libreria avvolge Popper.js in un componente React chiamato Floater, quindi ha le stesse grandiose funzionalità di Floater. Puoi aggiungere tooltip e popup, e puoi anche giocare con questo componente attraverso questa sandbox.
Reagire Autotip - Un semplice componente React con la funzione di auto-posizionamento, e l'Autotip lo farà regola automaticamente la posizione del suggerimento quando lo spazio disponibile attorno a esso cambia.
Reagire Tippy - Costruito su Tippy.js e Popover.js. Questa libreria presenta a tooltip componente quello puoi includere nella tua applicazione React.
Reagire Suggerimento - Un componente React che estende Hint.css. I componenti aggiungono alcune funzionalità che non sono disponibili in Hint.css come posizione automatica, ritardo e una funzione di richiamata.
Di Più
Suggerimenti per le braci - Un componente Ember.js per la creazione di tooltip, è costruito su Popper.js. Il componente è inoltre progettato tenendo presente l'accessibilità e continua a migliorare per soddisfare circa 508 complience in materia.
Suggerimento D3 - un plugin D3.js. D3.js è una libreria JavaScript per la visualizzazione dei dati come grafici, mappe, diagrammi, ecc. Questo plug-in ti consente di mostrare il suggerimento sopra questi dati.
