Hola gente, estoy intentando hacer funcionar unos de los ejemplos que tienen en la web de mootools, mas precisamente el del
tooltip, pero por más que lo intente no hay manera de que funcione.
He revisado las rutas a los archivos y están correctas, he mirado que este todo puesto dentro de la etiqueta header menos el codigo HTML claro, pero no doy con el error.
Me podríais ayudar? aquí os dejo todo el código, muchas gracias por cualquier ayuda!
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>wowowowo</title>
<style type="text/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(img/bubble.png) top left;
}
.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(img/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;
}
</style>
<script type="text/javascript" src="mootools-release-1.11.js"></script>
<script type="text/javascript">
/* 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'
});
</script>
</head>
<body>
<h3>Tips 1</h3>
<img src="img/moo.png" alt="mooCow" class="Tips1" title="Tips Title :: This is my tip content" />
<h3>Tips 2</h3>
<img src="img/moo.png" alt="mooCow" class="Tips2" title="Tips Title :: This is my tip content" />
<h3>Tips 3</h3>
Fixed tooltip: <a href="http://www.mootools.net" onclick="return false;" class="Tips3" title="Mootools official website">Mootools.net</a>
<h3>Tips 4</h3>
Custom className: <a href="http://www.mootools.net" onclick="return false;" class="Tips4" title="Mootools official website">Mootools.net</a>
</body>
</html>