Aucune infobulle marche

babe -
babe - 8 juil. 2012 à 14:53

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

Afficher la suite

A voir également:

Aucune infobulle marche
Infobulle excel ✓ - Forum Excel
Infobulle word - Forum Word
Infobulle sur écran tactile - Forum HTML
Infobulle sur un bouto access - Forum Programmation
Infobulle Windows logon reminder ✓ - Forum Windows 7

6 réponses

Réponse 1 / 6

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

Salut,

Ton code est fonctionnel, je n'arrive pas à reproduire ton erreur.
Sur quel navigateur es-tu ?

Réponse 2 / 6

babe

Je suis sur firefox 13 :/

Réponse 3 / 6

babe

Mais ca me fait la meme erreur avec toutes les infobulles que j' ai pu essayer, ou dois je chercher, je ne sais pas.

Réponse 4 / 6

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

Est-ce qu'on peut voir ton code complet ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

babe

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>

Réponse 6 / 6

babe

Si quelqu' un comprend le truc....

Discussions similaires

Excel: Infobulle sur cellule

Infobulle survol souris

Créer infobulles Excel?

Comment insérer une info bulle dans document Word

Word: info-bulle

Votre réponse

Discussions similaires