Tippy.js - Lightweight Vanilla Javascript Tooltip Library

I tooltip sono utili per mostrare piccoli bit di contenuti extra. Salvano lo spazio sulla pagina e ti danno una stanza per animare qualcosa che attiri l'attenzione della gente.

In passato, abbiamo coperto gli script tooltip ma molti sviluppatori vogliono librerie personalizzate. Alcuni preferiscono jQuery, altri vogliono semplice JS vaniglia.

Il plugin Tippy funziona meglio per quest'ultimo gruppo chi vuole lavorare con il codice JS vaniglia.

Con Tippy.js ottieni un libreria tooltip completamente funzionante in esecuzione su Popper.js. Questo significa che il plugin ha una piccola dipendenza, ma è molto più semplice da gestire rispetto alla libreria jQuery.

Allora, qual è la bellezza di Tippy? Aggiunge gli stili Popper predefiniti da creare suggerimenti più dinamici con effetti incredibili.

Puoi aggiungere dissolvenze, diapositive, oscillazioni, durate personalizzate, metodi di callback e persino effetti dinamici come le descrizioni comandi auto-rotanti.

In realtà questo plug-in porterà i tuoi tooltip a un livello completamente nuovo con funzionalità di usabilità ben definite. Puoi tenere tooltip fissi sullo schermo con determinati elementi di pagina, oppure invitali a cambiare orientamento se lo schermo diventa troppo piccolo.

Supporta anche i dispositivi touch che lo rendono perfetto per i layout reattivi. Il codice HTML del tooltip è etichettato usando gli standard ARIA per la massima accessibilità. Non riesco a pensare a niente di negativo da dire su questo plugin!

Se vuoi provare questo nel tuo sito basta scaricare una copia del codice sorgente da GitHub. Questo include i file del plugin principale insieme ai dettagli su come installarlo usando npm.

Il file di script Tippy.js predefinito viene fornito con Popper.js incluso, quindi non è nemmeno necessario scaricare quella libreria aggiuntiva. Tutto ciò di cui hai bisogno è il file JS / CSS predefinito e una pagina web per eseguire i suggerimenti.

Se vuoi approfondire alcuni esempi dai un'occhiata alla homepage di Tippy.js che include esempi dal vivo + frammenti di codice che puoi copiare e riutilizzare.