Affichage d'une bulle d'aide AU DESSUS d'un liste déroulante

26 mars 2007, 14:56

Bonjour,

J'affiche en javascript une bulle d'aide quand on passe la souris sur un élément. Cela fonctionne très bien mais pour les elements proche d'une liste déroulante la bulle d'aide s'affiche derrière.

A forciori, pour la bulle correspondante à la bulle d'aide, on ne la voit jamais, ou alors partiellement.

J'ai tenté des tas de script de bulle d'aide qui fonctionnent tous très bien sauf lorsqu'il y a une liste déroulante.

En gros j'ai une page avec 10 liste déroulante à la suite, toutes les bulles d'aides sont illisible car partiellement ou totalement recouvertes par les listes déroulantes...

Comment ce fais-ce? Est-ce possible d'y remedier?

PS: j'ai tenté de bidouiller quelque chose avec les z-index en css mais ca ne fonctionne pas...

Voici pour info la fonction d'affichage (j'en ai pris une mais toutes celle que j'ai utilisées ont le même problèmes)

Code : Tout sélectionner

function montre(text) {
  if(i==false) {
  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securitÃ©) on le rend visible.
  GetId("curseur").innerHTML = text; // Cette fonction est a amÃ©liorer, il parait qu'elle n'est pas valide (mais elle marche)
  i=true;
  }
}

La petite partie CSS de la bulle

Code : Tout sélectionner

.infobulle{
	position: absolute; 
	visibility : hidden;
	border: 2px solid Blue;
	padding: 10px;
	font-family: Verdana, Arial;
	font-weight: bold;
	color: white;
	font-size: 11px;
	background-color:#99CCFF;
}

26 mars 2007, 16:48

Un exemple vaut mieux que tous mon texte, alors voilà visuellement le probleme :

26 mars 2007, 17:05

Sous IE6 c'est un bug non corrigeable il me semble.

Essaie de mettre un z-index dans ta CSS sinon :

Code : Tout sélectionner

z-index : 999;

27 mars 2007, 08:16

A ok, comme le z-index marche pas je l'ai dans l'os...

Merci quand même...

27 mars 2007, 15:09

Ce sujet de la FAQ pourra peut être t'interesser

Afficher un calque au dessus d'un <select>

27 mars 2007, 17:17

Merci pour le lien... (encore pardon pour ne pas l'avoir trouvé tout seul)

J'ai essayer d'appliquer les conseils de la FAQ ce qui n'est pas evident vu que se sont des bulles d'aide dynamique et que elle ne sont pas exactement dans une <div> (enfin la div est créée dynamiquement).

Bref

J'ai fait un test sous une div dans laquelle j'apelle ma fonction javascript de bulle et ca me crée un grand espace vide avec marqué "false" dedans...

Code : Tout sélectionner

<td align="right" onmouseover="montre('Part');" onmouseout="cache();"><span class="Style1" ><strong>Part&nbsp;&nbsp;&nbsp;: </strong></span>&nbsp;&nbsp;</td>
  <td colspan="2"><div>
    <select name="select_part" onmouseover="montre('Select the part');" onmouseout="cache();" onChange="this.form.elements['select_finish'].selectedIndex='0';
	this.form.elements['select_impact'].selectedIndex='0';
	this.form.elements['select_thermal'].selectedIndex='0';
	this.form.elements['select_dimension'].selectedIndex='0';
	this.form.elements['select_rigidity'].selectedIndex='0';
	this.form.elements['select_weight'].selectedIndex='0';	
	submit();" align="left" style="width: 95%;">
      <option value="0" onmouseover="montre('Select the part');" onmouseout="cache();">Select the part</option>
      <?                
  	while($part = mysql_fetch_array($res_part)){ // parcours des resultats
		echo '<option style="z-index:2" onmouseover="montre(\''.urldecode($part["part"]).'\');" onmouseout="cache();" value='.urlencode($part["part"]);
			if (isset($_POST['select_part']) && urldecode($_POST['select_part'])==$part['part']) { echo ' selected'; }
		echo '>'.$part["part"].'</option>';
 	}
	?>
    </select></div></td>

Voici mon code (désolé pour le bazard y'a pas mal de javascript)

Comme on peut le voir sur ma capture d'écran plus haut j'ai donc un texte dans une colonne qui affiche une bulle d'aide (correspondant au bout de css que j'ai montré plus haut et au css ci-dessous) et dans la colonne d'après j'ai ma liste...

Code : Tout sélectionner

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

Alors voilà je ne sais pas trop comment adapter ca à mon code (d'autant que j'en ai tout partout des bulles d'aides même sur la liste en elle même).

Si quelqu'un voit la solution je suis tout ouïe

Affichage d'une bulle d'aide AU DESSUS d'un liste déroulante

Qui est en ligne