Mootools en 30 jours : jour 19 - Les infobulles

I. Introduction aux infobulles avec Mootools

Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu les tutoriels Mootools 1.2 précédents de notre série de 30 jours.

Aujourd'hui nous allons regarder le plugin intégré à Mootools sur les infobulles (tooltip en anglais). Avec “Tips,” vous pouvez facilement ajouter des infobulles personnalisées avec un titre et un contenu, des styles personnalisés, des effets de fade in/out. Nous examinerons les options des infobulles et les évènements, tout comme quelques outils qui vous permettront d'ajouter et supprimer des infobulles sur des éléments. Enfin, nous apprendrons comment avoir plusieurs styles d'infobulles sur la même page.

II. Explications

Les Bases

Création d'un nouvelle infobulle

La création de nouvelles infobulles est très simple. Tout d'abord, il faut créer un élément sur lequel nous attacherons notre infobulle.

Les infobulles de Mootools afficheront le titre et le texte du "rel" par défaut. S'il n'y a pas de rel, cela affichera le "href".

Pour créer une nouvelle infobulle par défaut

var customTips = $$('.tooltip');
var toolTips = new Tips(customTips);

Sans aucune modification de style, vous obtiendrez une infobulle qui ressemblera à cela :

Infobulle 1



Donner du style à votre infobulle

Mootools vous permet de contrôler totalement le style. Regardez l'infobulle html :

//vous pouvez assigner un nom de classe pour l'infobulle
//dans les options


Remarquez les divs du haut et du bas. Cela vous permet vous permet d'ajouter facilement des arrondis sur les sections du bas et du haut, ou d'autres effets de style.

Maintenant, configurons notre première option et ajoutons un peu de CSS. Le html ci-dessus met en place un div conteneur avec le nom de classe “options.className.” En assignant un nom de classe à vos infobulles, vous pouvez leur donner un style individuellement et non pas styler toutes les infobulles mootools de votre page :

var customTipsB = $$('.tooltipB');
var toolTipsB = new Tips(customTipsB, {
className: 'custom_tip'
});

Enfin, nous ajoutons un peu de CSS:

.custom_tip .tip {
background-color: #333
padding: 5px
}
 
.custom_tip .tip-title {
color: #fff
background-color: #666
font-size: 20px
padding: 5px
}
 
.custom_tip .tip-text {
color: #fff
padding: 5px
}

Infobulle 2



Les Options

Il y a seulement cinq options pour les infobulles et elles s'expliquent assez bien d'elles-même par leurs noms.

showDelay

Par défaut : 100

Un nombre entier mesuré en millisecondes, cela déterminera le délai avant lequel l'infobulle s'affichera quand la souris de l'utilisateur sera sur l'élément.

hideDelay

Par défaut : 100

Comme showDelay ci-dessus, sauf que ce nombre entier (aussi mesuré en millisecondes) déterminera le temps d'attente avant que l'infobulle ne se cache quand l'utilisateur à quitter l'élément.

className

Par défaut : null

Comme nous l'avons vu dans l'exemple ci-dessus, cela vous permet de définir un nom de classe pour le contenu de l'infobulle.

offsets

Par défaut : x: 16, y: 16

Cela déterminera à quelle distance de l'élément l'infobulle doit apparaître. ‘x’ fait référence à la droite, et ‘y’ fait référence au bas (chacun est relatif au curseur  SI l'option ‘fixed’ est définie sur false, sinon l'offset est relatif à l'élément original).

fixed

Par défaut : false

Cela détermine si l'infobulle suivra ou non la souris si l'utilisateur se déplace autour de l'élément. Si vous la mettez sur true, l'infobulle ne bougera pas quand vous déplacerez votre curseur, mais restera en position relative à l'élément original.

Les évènements

Les évènements des infobulles restent simples, tout comme le reste de cette classe d'ailleurs. Il y a deux évènements, onShow et onHide.

onShow

Cet évènement se lance quand l'infobulle apparaît. Si vous définissez un délai, cet évènement ne se lancera pas avant la fin du délai.

onHide

Tout comme onShow ci-dessus, mais lui se lance quand l'infobulle disparaît. S'il y a un délai, cet évènement ne se lancera pas avant la fin du délai.



Les méthodes

Il y a deux méthodes pour les infobulles, attach et detach. Cela vous permet de cibler un élément spécifique et de l'ajouter à un objet infobulle (et par conséquent il hérite de tous les paramètre de cette instance de classe) ou de la détacher d'un élément particulier.

.attach();

Pour attacher un nouvel élément à un objet infobulle, indiquez juste l'objet infobulle, concaténez lui .attach();, et enfin placez le sélecteur de l'élément dans des ().

toolTips.attach('#tooltipID3');

.dettach();

Cette méthode fonctionne comme .attach, mais cela fait l'inverse. D'abord, indiquez l'objet infobulle, puis ajoutez .dettach(), et enfin placez votre sélecteur de l'élément dans des ().

toolTips.dettach('#tooltipID3');


Exemple

Pour cet exemple, nous allons créer deux instances du plugin Tips, de façon à avoir deux styles différents d'infobulles. Nous intégrerons aussi les options, évènements et méthodes que nous avons vu plus haut.

var customTips = $$('.tooltip');
 
var toolTips = new Tips(customTips, {
//cela définira le temps pendant lequel
//l'infobulle attendra avant de se montrer
//quand vous passez sur le mouseover de l'élément
//en millisecondes
showDelay: 1000, //par défaut : 100
 
//le délai d'attente avant lequel
//l'infobullee attendra avant de se cacher
//quand vous quittez l'élément
hideDelay: 100, //default is 100
 
//cela ajoutera un div conteneur
//avec la classe suivant sur vos infobulles
//cela vous permet d'avoir différents styles d'infobulles
//sur la meme page
className: 'anything', //par défaut sur null
 
//cela définit les coordonnées x et y
offsets: {
'x': 100, //par défaut : 16
'y': 16 //par défaut : 16
},
 
//cela détermine sur l'infobulle
//reste en place ou suit votre curseur
//true la rend statique
fixed: false, //par défaut : false
 
//si vous appelez les fonctions en dehors
//des options
//alors cela peut "flasher" un peu sur les transitions
//c'est plus fluide si vous les laissez ici
onShow: function(toolTipElement){
//passe l'élément infobulle
//vous pouvez faire un fondu avec l'opacité
//ou les laisser un peu transparentes
toolTipElement.fade(.8);
$('show').highlight('#FFF504');
},
onHide: function(toolTipElement){
toolTipElement.fade(0);
$('hide').highlight('#FFF504');
}
});
 
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //par défaut : null
});
 
//vous pouvez changer les valeurs des infobulles en utilisant .store();
//pour écraser le rel, comme le code suivant
$('tooltipID1').store('tip:text', 'Vous pouvez remplacer le href avec le texte que vous voulez.');
$('tooltipID1').store('tip:title', 'Voici un nouveau titre.');
 
//le code suivant ne changera pas le texte de l'infobulle
$('tooltipID1').set('rel', 'Cela ne changera pas le texte des infobulles');
$('tooltipID1').set('title', 'Cela ne changera pas le titre');
 
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
onShow
onHide


Infobulle 1

Infobulle détachée

Infobulle 3

Inofbulle détachée puis attachée de nouveau

Une infobulle avec un peu de style

III. Conclusion du tutorial

Pour en savoir plus…

Lisez la sections des docs parlant des Tips. Il y a aussi un article intéressant de David Walsh intitulé customizing your Mootools Tips.

Téléchargez un zip avec tout ce qu'il faut

Tutoriel de demain

Pour le jour 20, nous ferons un petit projet, sur comment créer différents types de contenus tabulaires.