Discussion :

[grinder59]

Bonjour,

je dispose d'une case de tableau dans laquelle j'ai une donnée (exemple : Bonjour) et au survol de cette case, je voudrais afficher un complément à la donnée déjà présente (exemple : Paul).

J'ai réussi à le fiare avec la balise <a>, mais là, mon texte complémentaire ne s'affiche qu'au survol du texte et pas de la case :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
  <td class=c24>
    <a class=info href=#>Bonjour<span> Paul</span></a>
  </td>

pour le style suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
    a.info{font-size:7pt;position:relative;text-decoration:none}
    a.info:hover{font-size:7pt;z-index:25; background-color:#ff0000;}
    a.info span{font-size:7pt;display: none}
    a.info:hover span{font-size:7pt;display:block;position:absolute;}

J'ai essayé de placer la classe info sur le td, mais pas moyen...

Auriez vous une solution ou au moins une piste ?

Merci de votre aide...

[muad'dib]

Il va falloir coupler avec du Javascript, la balise a est une balise particulière qui gère l'évènement hover

Exemple (non testé)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<script>
void afficher_complement() {
    document.mon_id.innerHTML = 'ton texte';
}
</script>
<td id="mon_id" onmouseover="afficher_complement()">

[grinder59]

Suite à tes conseils, je fais la chose suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
td span{font-size:7pt;display: none}
td:hover span{font-size:7pt;display:block;position:absolute;top:0em;left:0em;width:20em;border:1px solid #6699cc;background-color:#eeeeee;font-weight:none;padding:1px;}
 
<td>texte de base<span>test sup</span></td>

ça fonctionne très bien, sauf que mon texte est planté en haut à gauche du navigateur. td représentant une case de tableau, il y a forcément plusieurs cases avec plusieurs "pop up". Mais ai-je la possibilité d'ancrer ces pop up à leur case de référence ? (sans que le texte supplémentaire soit inclus dans la case sinon ça va la déformer)