mooToolTip

» Progetti » Mootools plugins

Panoramica

mooToolTip è una classe mootools che permette di creare dei tooltip su qualsiasi elemento.
I tooltip possono essere posizionati dove si vuole e si può scegliere se seguono il cursore del mouse o se rimangono fermi nella posizione indicata

Sintassi

HTML

Il funzionamento del tooltip in se per se non necessita di codice HTML.
Si deve solamente specificare in HTML l’elemento sopra il quale si vuole far comparire il tooltip; ad esempio se volessimo che il nostro tooltip compaia sopra un textfield potremmo definire il seguente codice html

<input type="text" id="text1" value="Move the cursor over here" />

che rappresenta appunto il text field sopra il quale verrà visualizzato il tooltip.

JavaScript

var tp1 = new mooToolTip({
     toolTip:{
          'width': '170px',//width of the toolTip
          'height': '70px',//toolTip height
          'id': 'ciao',//id of the toolTip
          'posy': -80,//position top of the toolTip
          'posx': -30,//position left of the toolTip
          'title': 'ToolTip Title',//toolTip title
          'text': "This textfield can't be empty"//toolTip text
     },
     flwCursor: true,//toolTip follower or fixed
     id_elementFire: 'text1'//id of the element which will be visualize the tooltip
})

Params

Dell’elemento toolTip possono essere settate le seguenti opzioni:

  • height: Altezza del toolTip. Di default vale ‘auto’.
  • width: Larghezza del toolTip. Di default vale ‘auto’.
  • id: Id che sarà applicato al toolTip. Di default vale null.
  • posx: Posizione left del toolTip rispetto o all’elemento che fa visualizzare il toolTip(nel caso che il toolTip sia fisso), o rispetto al cursore del mouse(nel caso che il toolTip segua il cursore del mouse). Di default vale ‘10′.
  • posy: Posizione top del toolTip rispetto o all’elemento che fa visualizzare il toolTip(nel caso che il toolTip sia fisso), o rispetto al cursore del mouse(nel caso che il toolTip segua il cursore del mouse). Di default vale ‘10′.
  • CSSclass: Classe CSS che verrà applicata al toolTip. Di default vengono definite alcune classi CSS utili al funzionamento del toolTip.
  • icon: Parametro booleano. Se impostato a true, all’interno del toolTip verrà visualizzata anche l’icona. Valore di default true.
  • title: Titolo del toolTip. Valore di default una stringa nulla.
  • text: Testo del toolTip. Valore di default una stringa nulla.
  • timeWait: Tempo di attesa per visualizzare il toolTip. Valore di default 100.

Parametri generali della classe:

  • flwCursor: Parametro booleano. Se impostato a true il toolTip seguirà il cursore del mouse, altrimenti rimarrà fisso. Valore di default true.
  • id_elementFire: Id dell’elemento che farà visualizzare il toolTip.
  • openTime: Durata dell’animazione utilizzata per l’apertura del toolTip in ms. Valore di default 500.

CSS

Il codice CSS è completamente personalizzabile e non ha nulla a che vedere con il funzionamento del tooltip.

E’ stato usato un unico file mooToolTip.css per personalizzare il toolTip nell’esempio mostrato; sono state utilizzate delle immagini e delle proprietà standard che si adattavano con l’esempio fornito.

.mooToolTip /* classe del tooltip */
{
        background: transparent url(bck.png) no-repeat top center;
        padding-top: 5px;
        padding-left: 13px;
}
.mooToolTip .eqepa_mooToolTip_icon /* classe dell'icona del tooltip */
{
	width: 48px;
	height: 48px;
	background: transparent url(tip.png) top center no-repeat;
	position: absolute;
	top: 2px;
	left: 7px;
}
.mooToolTip .eqepa_mooToolTip_title/* classe del titolo del tooltip */
{
	text-align: center;
	color: white;
	font-size: 12px;
	font-family: Verdana;
	font-weight: bold;
}
.mooToolTip .eqepa_mooToolTip_text/* classe del testo contenuto nel tooltip */
{
	color:white;
	font-family:Verdana;
	font-size:11px;
	left:52px;
	padding-top:2px;
	position:absolute;
	width:115px;
}

Note

La classe è stata testata con Firefox 3.5, Chrome 4.0 e Internet Explorer 8.
Per suggerimenti,bug report,lasciare un commento(sempre molto graditi ;-) ) e scaricare il materiale vai qui. :-)