Utilisation des tips avec mootools

julien lavault — Wed, 04 Jun 2008 08:25:00 +0000

Moolools permet de faire des infos bulles très sympa sous le nom de 'tips'. Son utilisation est très simple et permet d'ajouter des effets de transition sur l'apparition et la disparition des tips. L'exemple du site mootools est déjà très bien détaillé, je le complèterai en vous expliquant comment enrichir les effets sur vos tips.

/* Ma Tips */

var Tips2 = new Tips($$('.classTips'), {
   // On initilalise l'effet que l'on souhaite mettre en place (par defaut un effet en alpha d'apparition)
   initialize:function(){ this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0); },
   // Gestionnaire d'événement lancé à l'apparition de la Tips
   onShow: function(toolTip) { this.fx.start(1); },
   // Gestionnaire d'évènement lancé à la disparition de la Tips
   onHide: function(toolTip) { this.fx.start(0); }
});

Vous pouvez ainsi facilement rajouter des effet visuel sur l'apparition et la disparition de vos tips, comme un effet de grossissement elastique avec un changement de couleur de fond et de police. En référence pour créer cet effet visuel, le précédent article Enrichir vos formulaire avec FxStyles de mootools.

// On initialise l'objet Fx.Styles
            initialize:function(){ this.fx = new Fx.Styles(this.toolTip, {
               duration:500,
               wait:false,
               transition: Fx.Transitions.Back.easeOut
           });

          // On attache le gestionnaire 'onShow
            onShow: function(toolTip) { this.start({
                   'width': 400,
                   'color': #CCCCCC,
                   'background-color': #CCCCCC
                });
           });

            // On attache le gestionnaire d'évènement 'blur'
            onHide: function(toolTip) { this.start({
                   'width': 250,
                   'color': #FFFFFF,
                   'background-color': #FFFFFF
                });
           });

De nombreuses combinaisons sont possible, a vous de les imaginer!

JFLAD Blog: Recherche & développement: Ajax, Javascript, CSS, XHTML, Flash, Référencement, Webmarketing, Open Source, gestion de projet - article

Utilisation des tips avec mootools