Une infobulle dans un div

Problème de taille de l'infobulle

4 janvier 2011 à 11:48:25

Bonjour,
Voila j"ai besoin d'infobulle sur mon site donc ne connaissant pas grand chose en JavaScript je me suis mis a la recherche d'un script sympa, que j'ai trouver en quelque minute. Il fonctionne avec un div cacher qui apparait / disparait grâce a une onmouseover / onmouseout
Je l'ai adapté, et celui-ci fonctionne très bien
Sauf (et oui il y a toujours un sauf ) quand le contenu de l'infobulle et trop important et que l'infobulle dépasse du div dans lequel se trouve le code pour appelé l'infobulle (le onmouseover), bah la l'infobulle ne s'affiche pas
Voici mon code
Le JS

function GetId(id)
      {
      return document.getElementById(id);
      }
      var i=false; 
      function move(e) {
         if(i) {  
          if (navigator.appName!="Microsoft Internet Explorer") { 
          GetId("curseur").style.left=e.pageX + 5+"px";
          GetId("curseur").style.top=e.pageY + 10+"px";
          }
          else {
          if(document.documentElement.clientWidth>0) {
      GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
      GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
          } else {
      GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
      GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
               }
          }
        }
      }
      function montre(text) {
        if(i==false) {
        GetId("curseur").style.visibility="visible"; 
        GetId("curseur").innerHTML = text; 
        i=true;
        }
      }
       function cache() {
      if(i==true) {
      GetId("curseur").style.visibility="hidden"; 
      i=false;
      }
      }
      document.onmousemove=move;

Ensuite le CSS

.infobulle
{
  color:white;
  position: absolute;  
  visibility : hidden;
  max-width:300px;
  padding: 10px;
  font-family: Trebuchet MS;
  font-size:14px;
  background-color:rgb(53,53,53);
}

Et pour finir le code de la page ou se trouve l'appelle

<div id="corps">
<div id="curseur" class="infobulle"></div>
<div class="part" onmouseover="montre('Description : contenu')" onmouseout="cache();">
</div></div>

Donc voici ma question comment faire pour que même si le contenu de l'infobulle est trop important et dépasse du div corps celle-ci apparaissent quand même mais en dépassent ?

Merci d'avance
Bonne journée

rdelbaere

13 janvier 2011 à 8:54:19

Up, toujours pas de solution,
Merci d'avance

KspRIsBack

14 janvier 2011 à 16:23:54

Il suffit de mettre ton <div> infobulle à l'extérieur de ton <div> corps, comme ceci :

<div id="corps">
<div class="part" onmouseover="montre('Description : contenu')" onmouseout="cache();">
</div></div>
<div id="curseur" class="infobulle"></div>

rdelbaere

14 janvier 2011 à 20:52:46

Tout d'abord merci de votre réponse.
Mais cela ne change rien, si vous avez une autre solution je suis preneur
Merci d'avance

KspRIsBack

14 janvier 2011 à 21:49:51

Vérifie que c'est bien le div "corps" et non le <body> qui bride "infobulle".
Sinon vérifie que montre() se contente d'afficher et de cacher "infobulle" mais ne le retrace pas dans le div "corps".
Si c'est toujours pas bon, poste le xHTML et le CSS au complet, et aussi montre() STP afin que je puisse t'aider d'avantage!

rdelbaere

15 janvier 2011 à 9:27:29

J'ai vérifié se n'est pas le body qui bride infobulle, en vérité je ne sais même pas si c'est un problème de div, c'est la conclusion a laquelle je suis arrivée mais bon
Je vous envoi mon code dans la journée en attendant si vous avez une autre idée