infobulle html/css

[Araknidos]

Bonjour,

Je ne parviens pas à faire afficher les infobulles au dessus du curseur et centrée par rapport à l'image survolée.
J'ai utilisé ces explications pour les faire :  1er site consulté et 2e site consulté

Vous pouvez voir mon tableau ici

Le code html :

Code:

[td class="bord"][b][color=#000000]Plaine de Fauconnia[/color][/b][/td]
[td class="bord"]<a class="tooltip" href=""><img src="https://i.servimg.com/u/f18/20/06/27/44/xvert110.png"
<span>[b]Orchis :[/b]
Présence à 100 %
Quantité =  1-2</span>
</a>[/td]

Et le css :

Code:

.tooltip
{
  text-decoration:none;
  position:relative;
}
 
 
.tooltip span
{
  display:none;
 
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background:white;
}
 
 
.tooltip span img
{
  float:left;
  margin:0px 8px 8px 0;
}
 
 
.tooltip:hover span
{
  display:block;
  position:absolute;
  top: -2.4em;
  left: 50%;
  transform: translateX(-50%); /* on centre horizontalement  */
  width:auto;
  max-width:320px;
  height:auto;
  border:1px solid black;
  margin-top:12px;
  margin-left:32px;
  overflow:hidden;
  padding:8px;
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: nowrap;  /* on interdit le retour à la ligne */
}

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.