MOOTOOLS... effetto tooltip

[housed93]

UFFA !

E' da un mese che cerco di applicare questo cavolo di effetto alle immagini con i link ma non ci riesco mi date una mano!?
http://demos.mootools.net/Tips



Help me!!!

[br1]

Quale sarebbe la domanda? sai, anche il titolo non aiuta

ciao

[Mega69]

Dai uno sguardo alla documentazione ufficiale http://docs.mootools.net/Plugins/Tips.js
La prossima volta dai un titolo più esplicativo...

[housed93]

Allora... ciò che intendo dire è... Cosa devo fare per applicare questo effetto? Quale procedura devo eseguire?

Ecco ciò che faccio io:

1) Inserisco il codice JS nella pagina html:

/* Tips 1 */
var Tips1 = new Tips($$('.Tips1'));

/* Tips 2 */
var Tips2 = new Tips($$('.Tips2'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
}
});

/* Tips 3 */
var Tips3 = new Tips($$('.Tips3'), {
showDelay: 400,
hideDelay: 400,
fixed: true
});

/* Tips 4 */
var Tips4 = new Tips($$('.Tips4'), {
className: 'custom'
});

Poi aggiungo il codice CSS:

.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
}

.tool-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(bubble.png) top left;
}

.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(bubble.png) bottom right;
}

.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}

.custom-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}

E poi il codice HTML:

[img]URL IMG[/img]

Risultato... non funziona!

[fcaldera]

a prescindere da altri errori o meno è difficile che il codice javascript possa funzionare in questo modo

var Tips1 = new Tips($$('.Tips1'));

se l'elemento con classe Tips1 non è già presente, la funzione $$ non trova i tuoi elementi perchè li definisci dopo. Dovresti richimare quelle istruzione ad esempio dentro

window.onload = function() {
var Tips1 = new Tips($$('.Tips1'));
...
}

oppure usando il domready di mootools.