Aucune infobulle marche

Bonjour,

j' ai un probleme, je viens d' essayer une dizaine d' infobulles, elles fonctionnent toutes sur le hover mais quand je retire le curseur, bien que l' infobulle disparaisse, son texte apparait en simple lien.

Par exemple, j' ai un texte "coucou" qui affiche dans une infobulle "ca va" quand on passe le curseur, ca ca marche. Quand on retire le curseur l' infobulle s' en va bien mais "ca va" apparait en lien a coté de "coucou".

Je ne sais plus quoi faire, voici mon code.

Toutes me font pareil, je comprend pas pkoi!

<a href="url-du-lien" class="tooltip">texte du lien<em><span></span>texte de l'infobulle</em></a>


a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: -10px;
    padding: 5px;
    color: #000;
    border: 1px solid #bbb;
    background: #ffc;
    width:170px;
}
a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 15px;
    height: 7px;
    width: 11px;
    background: transparent url(image-infobulle.gif);
    margin:0;
    padding: 0;
    border: 0;
}


Merci d' avance

6 réponses

  • Votes
  • Date
  • Date décroissante
  1. Salut,

    Ton code est fonctionnel, je n'arrive pas à reproduire ton erreur.
    Sur quel navigateur es-tu ?
    1. Mais ca me fait la meme erreur avec toutes les infobulles que j' ai pu essayer, ou dois je chercher, je ne sais pas.
      1. Y' en a long je te previens :/

        alors index.php

        <?php 
        session_start();
        include('includes/config.php');
        ?>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>coucou</title>
        <meta name="description" content="Bienvenue sur mon petit site.">
        <style type="text/css">
        body {
        	margin-left: 0px;
        	margin-top: 0px;
        	margin-right: 00px;
        	margin-bottom: 0px;
        	background-image: url(images/bg_main.png);
        	background-repeat: repeat-x;
        	color: #333;
        	
        }
        td,th {
        	color: #333;
        }
        a:link {
        	color: #1048A8;
        }
        a:visited {
        	color: #1048A8;
        }
        a:hover {
        	color: #09F;
        }
        a:active {
        	color: #1048A8;
        }
        
        
        div#footer{
          position:absolute;
          bottom:0;
          left:0;
          width:100%;
          height:50px;
          background-image: url(images/bg_bottom.png);
          background-repeat: repeat-x;
          vertical-align:middle;
          font-size:13px;
         }
         @media screen{
          body>div#footer{
        	position: fixed;
        	text-align: center;
        	vertical-align:middle;
          }
         }
         * html body{
          overflow:hidden;
          
         } 
         * html div#content{
          height:100%;
          overflow:auto;
         }
        body,td,th {
        	font-size: 15px;
        }
        
        .shadow{
        	color: #333;
        	text-shadow: 2px 2px 2px #999;
        	font-size: 20px;
        }
        	
        .titreforums:link {
        	color: #333;
        	text-shadow: 2px 2px 2px #999;
        	font-size: 20px;
        	}
        .titreforums:visited {
        	color: #333;
        	text-shadow: 2px 2px 2px #999;
        	font-size: 20px;
        	}
        .titreforums:hover {
        	color: #333;
        	text-shadow: 2px 2px 2px #666;
        	font-size: 20px;
        	}
        .titreforums:active {
        	color: #333;
        	text-shadow: 2px 2px 2px #999;
        	font-size: 20px;
        	} 
        
        <!--[if IE]>
        .titreforums:link {
            color: #333;
        	text-shadow: 2px 2px 2px #999;
        	font-size: 20px;
        	}
        
        <!--[endif]-->
        
        .titresforums:link {
        	color: #333;
        	text-shadow: 2px 2px 2px #999;
        	font-size: 15px;
        	}
        .titresforums:visited {
        	color: #333;
        	text-shadow: 2px 2px 2px #999;
        	font-size: 15px;
        	}
        .titresforums:hover {
        	color: #333;
        	text-shadow: 2px 2px 2px #666;
        	font-size: 15px;
        	}
        .titresforums:active {
        	color: #333;
        	text-shadow: 2px 2px 2px #999;
        	font-size: 15px;
        	} 
        
        <!--[if IE]>
        .titresforums:link {
            color: #333;
        	text-shadow: 2px 2px 2px #999;
        	font-size: 15px;
        	}
        <!--[endif]-->
        
        
        a.tooltip em {
            display:none;
        }
        a.tooltip:hover {
            border: 0;
            position: relative;
            z-index: 500;
            text-decoration:none;
        }
        a.tooltip:hover em {
            font-style: normal;
            display: block;
            position: absolute;
            top: 20px;
            left: -10px;
            padding: 5px;
            color: #000;
            border: 1px solid #bbb;
            background: #ffc;
            width:170px;
        }
        a.tooltip:hover em span {
            position: absolute;
            top: -7px;
            left: 15px;
            height: 7px;
            width: 11px;
            background: transparent url(image-infobulle.gif);
            margin:0;
            padding: 0;
            border: 0;
        }
        </style>
        
        
        <script type="text/javascript">
        function ChangeStatut(formulaire) 
        {
        if(formulaire.regagree.checked == true) 
        {formulaire.validation.disabled = false }
        if(formulaire.regagree.checked == false) 
        {formulaire.validation.disabled = true }
        }
        </script> 
        <script>
        function clignotement(){
        if (document.getElementById("MonElement").style.display=="block")
        document.getElementById("MonElement").style.display="none";
        else
        document.getElementById("MonElement").style.display="block";
        }
        // mise en place de l appel régulier de la fonction toutes les 0.5 secondes
        setInterval("clignotement()", 500);
        </script> 
        
        </head>
        <body>
        
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td height="100" align="left" valign="top" style="background-image:url(images/bg_menu_top.gif);"><table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="250" height="100" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td height="100" align="left" valign="top" style="background-image:url(images/bg_menu_top.gif);"><table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="250" height="100" align="left" valign="top"><a href="http://www.coucou.info"><img src="images/logo.png" width="300" height="99" border="0" /></a></td>
                              <td width="750" align="left" valign="middle">
                              <?php include('includes/login.php'); ?>
                              </td>
                            </tr>
                          </table></td>
                        </tr>
                      </table></td>
                    </tr>
                  </table>            <a href="http://www.coucou.info"></a></td>
                </tr>
              </table></td>
            </tr>
          </table></td>
        </tr>
        </table>
        <br />
        <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="250" align="left" valign="top"><table width="200" border="0" align="left" cellpadding="0" cellspacing="0">
              <tr>
                <td><table width="240" border="0" align="left" cellpadding="0" cellspacing="0">
                  <tr>
                    <td height="10" style="background:url(images/bg_h_main.png);"></td>
                  </tr>
                  <tr>
                    <td height="78" align="left" valign="top" style="background:url(images/bg_m_main.png);"><table width="220" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="24" align="left" valign="top"></td>
                        <td width="196" height="10" align="left" valign="top"></td>
                      </tr>
                      <tr>
                        <td align="left" valign="middle"><img src="images/miniicones/accueil.gif" width="16" height="16" /></td>
                        <td align="left" valign="middle"><a href="index.php">Accueil</a></td>
                      </tr>
                      <tr>
                        <td align="left" valign="middle"><img src="images/miniicones/annonces_mini.gif" width="16" height="16" /></td>
                        <td align="left" valign="middle"><a href="annonces">Les Annonces</a></td>
                      </tr>
                      <tr>
                        <td align="left" valign="middle"><img src="images/miniicones/forums_mini.gif" alt="" width="16" height="16" /></td>
                        <td align="left" valign="middle"><a href="index.php?u=forums">Les Forums</a></td>
                      </tr>
                      <tr>
                        <td align="left" valign="middle"><img src="images/miniicones/annuaire.gif" width="16" height="16" /></td>
                        <td align="left" valign="middle"><a href="index.php?u=upld">Uploadez vos fichiers</a></td>
                      </tr>
                      <tr>
                        <td height="10" align="left" valign="middle"></td>
                        <td height="10" align="left" valign="middle"></td>
                      </tr>
                    </table></td>
                  </tr>
                  <tr>
                    <td height="10" style="background:url(images/bg_b_main.png);"></td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td><?php if(!isset($_SESSION['coucouinfo']))
        	{
        	?>
                  <table width="240" border="0" align="left" cellpadding="0" cellspacing="0">
                    <tr>
                      <td height="10" style="background:url(images/bg_h_main.png);"></td>
                    </tr>
                    <tr>
                      <td height="78" align="left" valign="top" style="background:url(images/bg_m_main.png);"><table width="220" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                          <td width="24" align="left" valign="top"></td>
                          <td width="196" height="10" align="left" valign="top"></td>
                        </tr>
                        <tr>
                        <td height="30" colspan="2" align="center" valign="middle">
                          <div id="MonElement"
        class="EX_div" style="font-size:12px; color:#F00; font-weight:bolder;">CONNECTEZ-VOUS POUR<br />ACCEDER A VOS FONCTIONS</div> 
                          </td>
                          </tr>
                        <tr>
                          <td height="10" colspan="2" align="left" valign="middle"></td>
                          </tr>
                        <tr>
                          <td align="left" valign="middle"><img src="images/miniicones/tableaudebord_mini.gif" width="16" height="16" /></td>
                          <td align="left" valign="middle" style="color:#999;">Mon tableau de bord</td>
                        </tr>
                        <tr>
                          <td align="left" valign="middle"><img src="images/miniicones/messages_mini.gif" width="16" height="16" /></td>
                          <td align="left" valign="middle" style="color:#999;">Mes messages/notifications</td>
                        </tr>
                        <tr>
                          <td align="left" valign="middle"><img src="images/miniicones/achats_mini.gif" alt="" width="16" height="16" /></td>
                          <td align="left" valign="middle" style="color:#999;">Mes achats/ventes</td>
                        </tr>
                        <tr>
                          <td align="left" valign="middle"><img src="images/miniicones/fichiers_mini.gif" width="16" height="16" /></td>
                          <td align="left" valign="middle" style="color:#999;">Mes fichiers</td>
                        </tr>
                        <tr>
                          <td height="10" align="left" valign="middle"></td>
                          <td height="10" align="left" valign="middle"></td>
                        </tr>
                      </table></td>
                    </tr>
                    <tr>
                      <td height="10" style="background:url(images/bg_b_main.png);"></td>
                    </tr>
                  </table>
                  <?php
        	}
        	else
        	{
        	?>
                  <table width="240" border="0" align="left" cellpadding="0" cellspacing="0">
                    <tr>
                      <td height="10" style="background:url(images/bg_h_main.png);"></td>
                    </tr>
                    <tr>
                      <td height="78" align="left" valign="top" style="background:url(images/bg_m_main.png);"><table width="220" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                          <td width="24" align="left" valign="top"></td>
                          <td width="196" height="10" align="left" valign="top"></td>
                        </tr>
                        <tr>
                          <td align="left" valign="middle"><img src="images/miniicones/tableaudebord_mini.gif" width="16" height="16" /></td>
                          <td align="left" valign="middle"><a href="index.php?u=cpte">Mon tableau de bord</a></td>
                        </tr>
                        <tr>
                          <td align="left" valign="middle"><img src="images/miniicones/messages_mini.gif" width="16" height="16" /></td>
                          <td align="left" valign="middle"><a href="index.php?u=msg">Mes messages/notifications</a></td>
                        </tr>
                        <tr>
                          <td align="left" valign="middle"><img src="images/miniicones/achats_mini.gif" alt="" width="16" height="16" /></td>
                          <td align="left" valign="middle"><a href="index.php?u=achvtes">Mes achats/ventes</a></td>
                        </tr>
                        <tr>
                          <td align="left" valign="middle"><img src="images/miniicones/fichiers_mini.gif" width="16" height="16" /></td>
                          <td align="left" valign="middle"><a href="index.php?u=files">Mes fichiers</a></td>
                        </tr>
                        <tr>
                          <td height="10" align="left" valign="middle"></td>
                          <td height="10" align="left" valign="middle"></td>
                        </tr>
                      </table></td>
                    </tr>
                    <tr>
                      <td height="10" style="background:url(images/bg_b_main.png);"></td>
                    </tr>
                  </table>
                  <?php
        	}
        	?></td>
              </tr>
            </table></td>
            <td width="754" align="right" valign="top">
            <?php
            include ('switch.php');
        	?>    </td>
          </tr>
        </table>
        <br />
        <br />
        <br />
        <div id="footer"><table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td height="50" align="center" valign="middle">© Graffx 2012 - Tous droits réservés.</td>
          </tr>
        </table>
        </div>
        <br />
        </body>
        </html>
        <?php mysql_close(); ?>


        et la page incluse:

        <?php
        ini_set('display_errors', 1);
        error_reporting(E_ALL);
        $idcat = $_GET['cat'];
        $idpost = $_GET['post'];
        ?> 
        <table width="740" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="10" style="background:url(../images/bg_m_gh.png);"></td>
          </tr>
          <tr>
            <td height="29" align="center" valign="top" class="effet" style="background:url(../images/bg_m_gm.png);">
              <div class="shadow" style="font-size:25px;">LES FORUMS DE DISCUSSIONS</div>
              </div></td>
          </tr>
          <tr>
            <td height="264" align="center" valign="top" class="effet" style="background:url(../images/bg_m_gm.png);"><br />
              <br />
              <table width="700" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="left" valign="top"><a href="index.php?u=forums">FORUMS</a> > <span class="effet" style="background:url(../images/bg_m_gm.png); background-color:none;">
                  <?php
        	  $titre2=mysql_query("SELECT id,titre FROM forums_cat WHERE id = '$idcat'");
        	  $titre = mysql_fetch_array($titre2);
        	  echo '<a href="index.php?u=forums&cat=';
        	  echo $titre['id'];
        	  echo '">';
        	  echo $titre['titre'];
        	  echo '</a>';
        	  ?>
                  </span> >
                  <span class="shadow" style="font-size:16px;">
                  <?php
        	  $post2=mysql_query("SELECT * FROM forums_topics WHERE id = '$idpost'");
        	  $post = mysql_fetch_array($post2);
        	  echo $post['titre'];
        	  ?>
              </span>
              </td>
                </tr>
              </table>
              <br />
              <br />
        <br />
           	  <?php
        	  $auteur = $post['auteur'];
        	  $user2=mysql_query("SELECT * FROM coucou_users WHERE pseudo = '$auteur'");
        	  $user = mysql_fetch_array($user2);
        	  ?>
              <?php
        	  $usert=mysql_query("SELECT COUNT(*) AS pseudo FROM coucou_users WHERE pseudo = '$auteur'");
        	  $userc=mysql_fetch_assoc($usert);
        	  $totaluser=$userc['pseudo'];
        	  ?>
              <table width="700" border="0" cellspacing="0" cellpadding="0" style="background: url(../images/forums/bg_titre.png);">
              <tr>
                <td height="60" colspan="5" align="left" valign="middle">
                
                <table width="670" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="615" height="30" align="left" valign="top" class="shadow"><?php echo $post['titre']; ?></div></td>
                  </tr>
                  <tr>
                    <td align="left" valign="top" style="color:#600; font-size:12px;">Posté le <?php echo date('d/m/Y', $post['timestamp']); ?> à <?php echo date('H\hi', $post['timestamp']); ?> par 
        			<?php 
        			if($totaluser > 0)
        			{
        			echo '<a href="index.php?u=profil&pseudo='.$post['auteur'].'" style="font-size:12px;" >'.$post['auteur'].'</a>';
        			}
        			else
        			{
        			echo '<b>';
        			echo ucfirst($post['auteur']);
        			echo ' (Non membre) </b>';
        			}
        			?></td>
                  </tr>
                </table>
                
                </td>
              </tr>
            </table>
              <table width="700" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td><table width="700" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td height="15" colspan="3"></td>
                      </tr>
                    <tr>
                      <td width="180" height="240" align="left" valign="top">
        			  <?php 
        			  if($user['photo'] !== '')
        			  {
        			  echo '<img src="images/profils/';
        			  echo $user['photo'];
        			  echo '" alt="" width="180" height="240" />';
        			  }
        			  else
        			  {
        			  echo '<img src="images/profils/nopic.png" alt="" width="180" height="240" />';
        			  }
        			  ?>
                      </td>
                      <td width="21">&nbsp;</td>
                      <td width="498" align="left" valign="top"><table width="490" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td height="188" align="left" valign="top"><?php echo nl2br($post['message']); ?></td>
                          </tr>
                        <tr>
                          <td align="left" valign="top"><br />
                          <?php
        
                          if($user['signature'] !== '')
        				  {
        				  echo '----------------------------<br />';
        				  echo $user['signature'];
        				  }
                          ?>
                          </td>
                          </tr>
                      </table></td>
                    </tr>
                  </table></td>
                </tr>
              </table>
              <br /></td>
          </tr>
          <tr>
            <td height="10" style="background:url(../images/bg_m_gb.png);"></td>
          </tr>
        </table>
        <br />
        <table width="740" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="10" style="background:url(../images/bg_m_gh.png);"></td>
          </tr>
          <tr>
            <td height="10" align="center" valign="top" class="effet" style="background:url(../images/bg_m_gm.png);"><br />
              <?php
        		  if($idcat > '1')
        		  {
        
        		  if(isset($_SESSION['coucouinfo']))
        		  {
        		  ?>
              <table width="700" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td height="250" align="center" valign="middle" style="background:url(../images/forums/bg_answer.png);"><table width="680" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="224" height="124" align="right" valign="top">Votre commentaire : </td>
                      <td width="456" align="left" valign="top"><label>
                        <textarea name="textarea2" id="textarea2" rows="10" style="width:400px;"></textarea>
                      </label></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top">&nbsp;</td>
                    </tr>
                    <tr>
                      <td colspan="2" align="center" valign="top"><label>
                        <input type="submit" name="button2" id="button2" value="Envoyer mon commentaire" />
                      </label></td>
                    </tr>
                  </table></td>
                </tr>
              </table>
              <br />
              <?php
        		  }
        		  else
        		  {
        		  ?>
              <table width="700" border="0" cellspacing="0" cellpadding="0" style="background: url(../images/forums/bg_titre.png);">
                <tr>
                  <td height="60" colspan="5" align="center" valign="middle" style="color:#900; font-size:16px; font-weight:bolder;">CONNECTEZ-VOUS POUR LAISSER UN COMMENTAIRE</td>
                </tr>
              </table>
              <br />
              <?php
                  }
        		  }
        		  else
        		  {
        		  ?>
              <table width="700" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td height="250" align="center" valign="middle" style="background:url(../images/forums/bg_answer.png);"><table width="671" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td height="20" align="right" valign="top">Votre pseudo  : </td>
                      <td align="left" valign="top">&nbsp;</td>
                      <td align="left" valign="top"><label>
                        <input type="text" name="pseudo" id="pseudo" />
                        </label><a href="url-du-lien" class="tooltip">texte du lien<em>texte de l'infobulle</em></a></td>
                    </tr>
                    <tr>
                      <td height="20" align="right" valign="top">&nbsp;</td>
                      <td align="left" valign="top">&nbsp;</td>
                      <td align="left" valign="top">&nbsp;</td>
                    </tr>
                    <tr>
                      <td height="20" colspan="3" align="center" valign="top">Couleur centrale de notre fanion national :
                        <input type="text" name="verif" id="verif" /></td>
                    </tr>
                    <tr>
                      <td height="20" align="right" valign="top">&nbsp;</td>
                      <td align="left" valign="top">&nbsp;</td>
                      <td align="left" valign="top">&nbsp;</td>
                    </tr>
                    <tr>
                      <td width="192" height="10" align="right" valign="top">Votre commentaire : </td>
                      <td width="14" align="left" valign="top">&nbsp;</td>
                      <td width="465" align="left" valign="top"><label>
                        <textarea name="message" id="message" rows="5" style="width:400px;"></textarea>
                      </label></td>
                    </tr>
                    <tr>
                      <td colspan="3" valign="top">&nbsp;</td>
                    </tr>
                    <tr>
                      <td colspan="3" align="center" valign="top"><label>
                        <input type="submit" name="button" id="button" value="Envoyer mon commentaire" />
                      </label></td>
                    </tr>
                  </table></td>
                </tr>
              </table>
              <br />      <?php
                  }
        		  ?></td>
          </tr>
          <tr>
            <td height="10" style="background:url(../images/bg_m_gb.png);"></td>
          </tr>
        </table>