Tips 1
CODIGOS:
- .- Scripts:
<script language='javascript' src='http://junioscripts.googlepages.com/mootools.svn.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent('domready', function(){
/* 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> - .- 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: orchid;
border-left:5px solid #fff;
}
.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background:firebrick;
border-left:5px solid #fff;
}
.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;
} - .- HTML:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24QIhqfsCu5qsgT1-8g6UkKlsnHS51XpNw3Uew3Kgzbc95FyLXAODNzjXLR9XHspiOpfGBAcfP_qya5X5DFk7NEDG3NriyeYQmPZQ-Y6znYV3RoIhxBDofiO4tkVL7KmyZYac3D9g1fc/s400/asterix0.gif" alt="Asterix" class="Tips1" title="Tips Title :: Prueba Tooltip de Mootools" />
Web autor: Mootools
|Sin comentarios
¿Quieres decir algo...?