jQuery, Webdesign

Crea tooltip su link e immagini in modo semplice con jQuery

sticky_tooltip.jpg

Sticky Tooltip è un plugin jQuery che permette di aggiungere un tooltip, azione di passaggio del mouse sopra l’elemento, contenente ulteriore codice HTML.

In generale il tooltip segue il cursore che si muove sull’area occupata dall’elemento, una caratteristica importante di questo plugin è che il suggerimento può essere mantenuto fisso, visibile, sullo schermo facendo click con il pulsante destro del mouse oppure premendo il tasto S sulla tastiera, qualora l’utente voglia interagire con il contenuto del tooltip.

Come detto, il contenuto di ogni suggerimento può essere definito come normale codice HTML, dunque molto facile da definire e personalizzare.

Utilizzo

Inserire nella sezione <head> del vostro documento il seguente codice:

carichiamo la libreria jQuery dai server di Google e il plugin in esame, con il foglio di stile correlato.

Creiamo dei link di esempio su sui attivare i tooltip:

i link e le immagini su cui vogliamo far visualizzare i tooltip devono avere come attributo data-tooltip e valore il nome o identificato del box dove andremo a definire il contenuto del tooltip.

Tutti i suggerimenti della pagina devono essere definiti all’interno di un div con attributo id univoco specificato nel codice sopra. A loro volta tutti questi suggerimenti devono essere definiti all’interno di un unico div con classe stickytooltip da non cambiare.
Il codice seguente chiarisce meglio quanto scritto:


Questo è il logo di Google Italy.

Logo il nuovo iMac.

come possiamo vedere dal codice è possibile impostare il tooltip a qualsiasi elemento della pagina.

Opzioni

Possiamo personalizzare a nostro piacimento il plugin Sticky Tooltip impostando alcune variabili nel codice dello script stickytooltip.js:

  • tooltipoffsets: [20, -30] : posizione x,y del tooltip dal cursore del mouse.
  • fadeinspeed: 200 : durata effetto dissolvenza (millisecondi).
  • rightclickstick: true – rendere fisso il tooltip sulla pagina.
  • stickybordercolors: [“black”, “darkred”] – colore bordo del tooltip a seconda dello stato (sciolto, fisso).
  • stickynotice1: [“Premere \”s\””, “o click destro”, “per fissare”] – messaggio stato sciolto.
  • tickynotice2: “Click fuori da questo box per nasconderlo” – messaggio stato fisso.

Sviluppato da Dynamic Drive, Sticky Tooltip plugin jQuery è disponibile con ulteriori informazioni, demo e script sulla pagina del progetto.

You might also like

  • Francisco De La Calle

    Come si possono applicare queste cose a Joomla?
    Ad esempio, con un modulo embed code html, fare l’embed di una immagine e volergli dare un tooltip personalizzato.
    dove dovrei mettere ad esempio il file “stickytooltip.js”??

    L’head nominato sopra in cui iniettare il codice, dov’è nascosto? E’ forse quello del template? o bisogna inserirlo nel codice del modulo?

    16 dicembre 2009

LEAVE A REPLY