page-translate

Créer une infobulle en Javascript

CSS / Javascript / Web

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Créer une infobulle

Vous pouvez avoir une infobulle comme c'est le cas en cliquant ici !

Les gens de chez Six Revisions nous ont concocté un didactitiel vraiment utile pour créer des infobulles facilement en Javascript et CSS.

Le didactiel (en anglais) nous mène, pas à pas, vers une solution simple et élégante pour construire une bulle d'information qui s'affiche au "mouseover" ou "hover" d'un hyperlien.

Copiez le code et utilisez !

Créez un fichier infobulle.js et copiez-y le code suivant :

var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;
 return{
  show:function(v,w){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
  if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
  h = parseInt(tt.offsetHeight) + top;
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   if(endalpha - a < speed &amp;&amp; d == 1){
    i = endalpha - a;
   }else if(alpha < speed &amp;&amp; d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     if(d == -1){tt.style.display = 'none'}
  }
 },
 hide:function(){
  clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();

Ensuite, créez un fichier infobulle.css ou ajoutez ce code à votre code CSS existant :

#tt {
 position:absolute;
 display:block;
 background:url(images/tt_left.gif) top left no-repeat;
 }
 #tttop {
 display:block;
 height:5px;
 margin-left:5px;
 background:url(images/tt_top.gif) top right no-repeat;
 overflow:hidden;
 }
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-left:5px;
 background:#666;
 color:#fff;
 }
#ttbot {
display:block;
height:5px;
margin-left:5px;
background:url(images/tt_bottom.gif) top right no-repeat;
overflow:hidden;
}

Finalement, pour afficher une infobulle, vous n'avez qu'à rajouter un onmouseover= et onmouseout= tel que :

<a onmouseover="tooltip.show('Voici une infobulle ! ', 200);" onmouseout="tooltip.hide();">Infobulle</a>

N'oubliez pas de télécharger les images aussi ! Elles sont incluses dans le fichier .zip.

Télécharger tous les fichiers dans infobulle.zip

Commentaires

Code très intéressant, mais il manque quelque chose. Comment gérer le z-index? dans le fichier CSS, cela ne semble pas avoir d'effet. Il faut surement modifier le JS en conséquence, mais comment? Merci
Voici la solution pour le z-index: il faut modifier le JS comme ceci: <code> ... tt.style.display = 'block'; <strong>tt.style.zIndex=100;</strong> c.innerHTML = v; ... </code>
Bonjour, Merci beaucoup pour ce code très pratique. J'aimerais savoir comment je peux mettre un layout (rectangle) autour du texte de mon info bulle

Ajouter un commentaire

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Écrivez le code apparaissant dans l'image.

Derniers articles