<div class="tooltip">
<img src="pouvoirs1.jpg" width="300" height="200" style="float: right; padding:0px 15px 0px 15px;">
<span><b>Film :</b> Maléfique </br>
  <b>Personnage :</b> Maléfique </br>
  <b>Interprète :</b> Angelina Jolie </br>
  <b>Pouvoir :</b> Fée, sorcellerie </br>
   </span>
   
</div>

.tooltip
{
  text-decoration:none;
  position:float;
}
 
 
.tooltip span
{
  display:none;
 
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:5px;
  border: 1px solid #cccccc;
  color:#666666;
  background:#ededed; 
}
 
 
.tooltip span img
{
  float:left;
  margin:0px 8px 8px 0;
}
 
 
.tooltip:hover span
{
  display:block;
  position:absolute;<br>  top:0;<br>  left:0;
  z-index:2;
  width:auto;
  border:1px solid black;
  max-width:300px;
  overflow:hidden;
  padding:5px;
  	-moz-box-shadow: 2px 1px 2px #000000 inset;
	-webkit-box-shadow: 2px 1px 2px #000000 inset;
	box-shadow: 2px 2px 2px #000000;/*1 le décalage horizontal de l'ombre 2 le décalage vertical de l'ombre 3 l'adoucissement du dégradé 4 la couleur de l'ombre - inset pour interieur*/
}

Bonjour à tous,

Je suis en train de coder un exemple de page type pour mon site et j'ai trouvé intéressant d'insérer des tooltip pour avoir des infobulles sur des images pour ajouter des informations.

Le code liant le tooltip à l'image et au texte fonctionne bien et mon css affiche quelque chose de correct.

Toutefois j'ai un petit soucis de positionnement: quand la souris survole mon tooltip l'infobule s'affiche toujours sur la gauche mais sur la ligne de l'image.
Quand j'ai une image placée à la gauche de mon texte ça va mais quand elle est sur la droite bah... c'est en face.

Je ne sais pas si cela est possible, mais je vous pose tout de même la question. Savez-vous s'il est possible avec un réglage de css de faire en sorte que l'info bulle apparaisse toujours par dessus mon image où qu'elle soit sur ma page.

Voila ce que ça donne sur mon teste: [url=http://ddstv.fr/Encyclopedie/Dictionaire/pouvoirs.php]texte exemple[/url]

Code du texte:
[php]<div class="tooltip">
<img src="pouvoirs1.jpg" width="300" height="200" style="float: right; padding:0px 15px 0px 15px;">
<span><b>Film :</b> Maléfique </br>
<b>Personnage :</b> Maléfique </br>
<b>Interprète :</b> Angelina Jolie </br>
<b>Pouvoir :</b> Fée, sorcellerie </br>
</span>

</div>[/php]

Css lié au tooltip:
[css].tooltip
{
text-decoration:none;
position:float;
}


.tooltip span
{
display:none;

-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:5px;
border: 1px solid #cccccc;
color:#666666;
background:#ededed;
}


.tooltip span img
{
float:left;
margin:0px 8px 8px 0;
}


.tooltip:hover span
{
display:block;
position:absolute;<br> top:0;<br> left:0;
z-index:2;
width:auto;
border:1px solid black;
max-width:300px;
overflow:hidden;
padding:5px;
-moz-box-shadow: 2px 1px 2px #000000 inset;
-webkit-box-shadow: 2px 1px 2px #000000 inset;
box-shadow: 2px 2px 2px #000000;/*1 le décalage horizontal de l'ombre 2 le décalage vertical de l'ombre 3 l'adoucissement du dégradé 4 la couleur de l'ombre - inset pour interieur*/
}
[/css]

J'ai trouvé ce code dans un tutoriel sur ce site: http://www.scriptol.fr/css/infobulle.php


Je continue de chercher en attendant vos suggestions.

Je vous remercie d'avance pour avoir lu ce message.

Bonne soirée.