begin process at 2010 08 01 01:23:45
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > MOOTOOLTIP

MOOTOOLTIP


 Information sur la source

Note :
Aucune note
Catégorie :Effets Classé sous :tooltip, mootools, element, infobulle Niveau :Débutant Date de création :08/02/2010 Date de mise à jour :17/05/2010 11:42:21 Vu / téléchargé :1 492 / 113
Auteur : Miky76

Ecrire un message privé
Site perso
Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note

 Description

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

Nécessite que la bibliothèque mooTools soit chargée (version actuelle v1.2.4). L'appel se fait directement en appelant la méthode affTooltip() implémentée dans la classe de base Element dans l'évènement domready.

Pour voir le programme tourner : http://sources.mightyprods.com/index.php?id=2.

Source

  • <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>
<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>

 Conclusion

Mes premières sources partagées, soyez indulgents !

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

17 mai 2010 11:42:21 :
Correction erreur d'interprétation sous IE due à l'absence de quotes autour des propriétés (notamment la propriété 'class' qui fait planter IE).

 Sources du même auteur

Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS
Source avec Zip MOOTABLEAU
Toutes les sources de Miky76

 Sources de la même categorie

Source avec Zip Source avec une capture VIDEO EN FOND DE PAGE WEB (HTML5) par BarbuJack
Source avec Zip Source avec une capture EFFET DE TEXTE EN CSS3 par kazma
Source avec Zip Source avec une capture TRANSFORMATIONS CSS ANIMÉES CROSS-BROWSER AVEC JQUERY par pysco68
Source avec Zip Source avec une capture DE L'OMBRE par kazma
INFO BULLE NON DESTRUCTIVE par McPeter
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA... par Kimjoa
INFO BULLE NON DESTRUCTIVE par McPeter
Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S... par Kimjoa
Source avec Zip BULLE par Zart
Source avec Zip Source avec une capture INFO-BULLE PERSONNALISABLE COMPATIBLE FIREFOX ET IE par mobman02

Commentaires et avis

Commentaire de Archima le 17/05/2010 11:30:09

Merci pour cette source vraiment utile (avoir une classe mootools est nettement plus pratique lorsque l'on travail sur un cms utilisant Mootools par défaut :D )

Seulement j'ai un  problème avec Internet Explorer : à la ligne 33 ie m'indique "Cet objet ne gère pas cette propriété ou cette méthode".
Je n'arrive pas à trouver le problème car sous les autres navigateurs cela marche sans problème...

Avez vous une solution ?
Merci d'avance,

Archima.

Commentaire de Miky76 le 17/05/2010 11:40:13

Ah c'est une erreur de ma part, j'ai la facheuse habitude de mettre les propriétés des objets sans quote, mais si FireFox l'accepte sans broncher, IE est moins permissif...

J'ai corrigé, je mets la source à jour de ce pas.

Bon développement, et content que cela vous soit utile !

Commentaire de Archima le 17/05/2010 11:59:48

J'ai toujours le même problème. J'ai bien modifié le script pour l'adapter à ce que je voulais, mais je n'ai pas touché à cette partie.
J'ai bien corrigé mon script et l'erreur reste la même...

(Si vous souhaitez jeter un coup d'oeil voici le site en question : 50ans.adapei53.fr )

Merci.
Archima.

Commentaire de Miky76 le 17/05/2010 13:31:16

J'ai testé votre site et effectivement c'est pour le moins étrange...

Un truc à tester néanmoins : dans l'évenement mouseover, essayez d'appeler directement la méthode d'affichage du tooltip rattaché à l'objet Element :

onmouseover="this.affTooltip('Art et musique le 19/06/2010',{duration:1000});"

Je me dis qu'il y a peut être un problème de portée, le plantage survenant sur l'affectation à la propriété .mtt de la classe, comme s'il refusait de créer cet attribut... Alors que cela fonctionne très bien sur d'autres utilisations de la classe, même sous IE.

Et modifiez le source de la classe pour pouvoir passer l'objet options en parametre, notamment la durée limitée dans votre cas à 1 seconde (je vais modifier mon source d'ailleurs, cela parait logique de donner cette possibilité) :

Element.implement({
affTooltip: function(texte, options) {
new MooTooltip(this, texte, options);
}
});

En espérant que cela suffira a venir à bout de ce mystère...

Commentaire de Archima le 17/05/2010 14:41:34

J'ai résolu le problème en utilisant $('liddelobjet').affTooltip(texte, options); à la place de this.affTooltip(texte, options);

IE n'aime pas le "this"...

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

pointeur sur element [ par bumblebee ] Boonjour, Je voudrais savoir comment récupérer un pointeur sur un élément de tableau qui se trouve dans un formulaire g déjà essayer ça mais marche po Listbox [ par mymic ] Alors j ai une textBox, en cliquant sur un bouton Ajouter la valeur saisie est ajoutée dans une listbox, imaginez un instant qu un utilisateur landa Pb avec Drag And Drop [ par Sylvain74 ] Bonjours tout le monde,voila,j a'ai recupéré un script permettant de faire du drag and drop avec les lignes d'un tableau.Je l'ai adapter pour passer d Selectionner tout les element d'un select [ par Cestmoi ] comment puis-je selectionner tout les elements d'une liste de choix en javascript ?Mon controle s'appelle "serv" et la fonction "sel().Merci ! Help me!!! 3 jours que je souffre!! Création en java d'une infobulle [ par aoifutaba ] Bonjour!! j'ai fais un site sur la japanimation et j'aimerais lorsque qu'on survole une image, faire apparaitre une infobulle avec du texte! Et en cli INFOBULLE!!!!!!!!! [ par Milo59 ] bonjour, je possède un script Java pour mettre des infobulles mais comment faire pour que l'infobulle ne dépasse pas la largeur de la page car sinon i calendrier dans infobulle !!!! [ par roninou ] j'essai desesperement de mettre une calendrier dans une infobulle pour que l'utilisateur puisse choisir la date qu'il veut.j'ai deja le code pour crée XHTML 1.0 strict et OnClick [ par eijii ] Bonjour,ces les vacances et depuis quelques jours je m'attèles à refaire de a à z mon pt'it site. Mais j'ai un soucis lorsque je passes mon site avec Tooltips [ par bosam ] Bonjour à tous le monde,Voilà, je poste ici car j'ai découvert sur ce site http://www.walterzorn.com/tooltip/tooltip_e.htm ; un script javascript DHTM tooltip et select [ par Djfresh ] salut comment creer un tooltip sur une balise select!plus precisément sur les balises option de la balise select?autrement dit en survolant les balise


Nos sponsors


Sondage...

CalendriCode

Août 2010
LMMJVSD
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,484 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)