Description

Affichage d'une infobulle sur un objet ciblé. Utile pour afficher une information relative à un contrôle de formulaire.

Documentation

Pour utiliser l'objet MooTooltip il faut inclure dans sa page la bibliothèque mooTools et le présent script :

<script type="text/javascript" src="mooTools.js"></script>
<script type="text/javascript" src="mootooltip.js"></script>

Il faut aussi intégrer à sa page le CSS contenant les styles css de l'infobulle :

<link type="text/css" rel="stylesheet" href="mootooltip.css" />

Ensuite, dans votre page web, il faut instancier sur un élément cible l'objet mooTooltip via un script javascript, dans l'évènement domready :

var elt = $('monelement');
new MooTooltip(elt, 'mon texte', { options });

Voici la liste exhaustive des options possibles :

• width: Largeur maximale du tableau,
• duration: Durée en millisecondes d'affichage de l'infobulle (0 pour affichage permanent),
• unique: L'infobulle est unique, l'affichage d'une nouvelle infobulle détruira les autres instances,
• fade: Effet de fondu pour l'affichage / masquage de l'infobulle.

Une méthode implémentée dans la classe Element permet d'instancier la classe directement depuis l'objet :

var elt = $('monelement');
elt.affTooltip('mon texte', [options]);

Démonstration

<link type="text/css" rel="stylesheet" href="demos/mooTooltip/mootooltip.css" />
<script type="text/javascript" src="demos/mooTooltip/mootooltip.js"></script>

<script type="text/javascript">
window.addEvent('domready', function() {
  $('valinscr').addEvent('click', function(e) {
    e.stop();
    if (!$('prenom').value) 	$('prenom').affTooltip('Champ obligatoire');
    else if (!$('nom').value) 	$('nom').affTooltip('Champ obligatoire');
    else this.affTooltip('Formulaire bien rempli, bravo !');
  });
});
</script>

<table>
<tr><td style="width: 120px;"><em>Prénom</em></td>
    <td><input type="text" id="prenom" style="width: 200px;" /></td></tr>
<tr><td style="width: 120px;"><em>Nom</em></td>
    <td><input type="text" id="nom" style="width: 200px;" /></td></tr>
<tr><td colspan="2" style="text-align: right;">
        <a href="#" id="valinscr">Valider</a></td></tr>
</table>

Notes de version

• v0.2 - 10/06/2010 - Ajout des options unique / fade, correction du positionnement dans le cas ou l'objet est dans un container scrollable (nécessite la dernière version de mooTools pour que cela fonctionne).
• v0.1 - Création de la classe de base, de la feuille de style css et d'une ressource graphique permettant de cibler l'élément désigné.

Bugs connus

• Dans le cas où l'objet est dans un container scrollable et qu'il n'est pas visible, il est nécessaire d'implémenter un scroll :

new Fx.Scroll('moncontainer').toElement('monelement').chain(function() { 
  $('monelement').affTooltip('Mon message');
});

Licence

Cette source est diffusée en open source sous la licence MIT, ce qui signifie que vous avez la possibilité de l'utiliser et la modifier en toute circonstance.

Téléchargement

mooTooltip v0.2.rar

Commentaires

Ajouter un commentaire

Votre nom
Votre message