[Réglé][CSS]Info Bulles

[Plume]

Bonjour !

Voilà, dans mon éditeur avec prévisualisation instantannée, je voudrais que lorsque l'utilisateur passe le curseur sur un bouton, une info bulle apparaisse donnant les indications nécessaires à l'utilisation correcte de ces boutons.
J'ai trouvé plusieurs scripts CSS, qui utilisent pratiquement tous les balises <a></a>. J'ai cherché à les adapter notamment en encadrant mes boutons avec des <label></label>. J'ai aussi tenté une application directe des exemples & cela ne marche pas plus.
Comme cela est possible en CSS, je tiens à préciser que je ne veux pas utiliser de JavaScript.

Je ne sais pas si vous avez des scripts fonctionnels. Je vais vous mettre celui que j'ai. Peut-être que c'est moi qui ait mal fait un truc, m'enfin un copier coller ...

Le XHTML ::

Code :

<form method='post' name='formTexte' action=''>
<label class='info'>
<input type='button' id='bnGras' name='bnGras' value='Gras' onClick='javascript:code("[gras]", "[/gras]");return(false)' />
</label>
<label class='info'>
<input type='button' id='bnItalique' name='bnItalique' value='Italique' onClick='javascript:code("[italique]", "[/italique]");return(false)' />
</label>
<label class='info'>
<input type='button' id='bnSouligne' name='bnSouligne' value='Souligné' onClick='javascript:code("[souligne]", "[/souligne]");return(false)' />
</label>
<label class='info'>
<input type='button' id='bnImage' name='bnImage' value='Ajouter une image' onClick='javascript:code("[image]", "[/image]");return(false)' />
</label>
<label class='info'>
<input type='button' id='bnLien' name='bnLien' value='Créer un lien' onClick='javascript:code("[lien vers=]", "[/lien]");return(false)' />
</label>
<label class='info'>
Alignement : <select name='optAlignement' id='optAlignement'>
<option value='' selected ></option>
<option value='aDroite' onClick='javascript:code("[droite]", "[/droite]");return(false)'>à droite</option>
<option value='aGauche' onClick='javascript:code("[gauche]", "[/gauche]");return(false)'>à gauche</option>
<option value='auCentre' onClick='javascript:code("[centre]", "[/centre]");return(false)'>au centre</option>
</select>
</label>
<textarea cols=150 rows=20 id='txtTexte' name='txtTexte' onClick='javascript:previsualisation()' ></textarea>
<div style="border: 1px dashed #000000; padding: 0.2em; height: 500px; overflow: auto; width: 98%;" align="left" id="txtPrevisualisation"></div>
<br />
<input type='submit' name='bnEnvoi' value='Envoyer' />
</form>

Et le CSS ::

Code :

<script language='text/css'>
label.info
{
position : relative;
z-index : 24;
background-color : #ccc;
color : #000;
text-decoration : none
}
        
label.info:hover
{
z-index : 25;
background-color : #ff0
}

label.info span
{
display : none
}

label.info:hover span
{
display : block;
position : absolute;
top : 2em;
left : 2em;
width : 15em;
border : 1px solid #0cf;
background-color : #cff;
color : #000;
text-align : center
}
</script>

Si quelqu'un peut m'aider ...

Merci. Tchu !