[PHPBB2] Afficher les informations du profil des messages avec plusieurs infobulles

 <!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
 </td>

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="230">

<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:230px;height:1px" />

 <!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<!-- ON CHANGE LA CLASS POUR UN AFFICHAGE DANS LA CSS -->
          <td class="M14_profil_sujet"{postrow.displayed.THANK_BGCOLOR} valign="top" width="230">
            <br />
<center><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a>
<strong>{postrow.displayed.POSTER_NAME}</strong>
</span></center><br />
 <div id="M14_label_bloc">
   <p> Voir son profil</p>
  
     <span class="M14_label_bulle">

   <!-- BEGIN profile_field -->
      <div id="M14_label">
  <span>{postrow.displayed.profile_field.LABEL}</span>
  <div>Information demandée:<br />{postrow.displayed.profile_field.CONTENT}<br /></div>
  <p>{postrow.displayed.POSTER_RPG}</p>
</div>
<!-- END profile_field -->
  </span>
</div>
  <br /><br /><br />
<center>
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
  {postrow.displayed.RANK_IMAGE}<br />
  {postrow.displayed.POSTER_AVATAR}<br />
</span></center><br />

  
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:230px;height:1px"/>
  
</td>

/*Le bloc gauche des messages*/
.M14_profil_sujet
{
background:#141414;/*la couleur de fond*/
height:300px;/*augmentez ou diminuez la hauteur*/
border: 1px solid #55bfcf;/*l epaisseur style  couleur de bordure*/
-moz-border-radius-: 8px;/*les bordures arrondies*/
-webkit-border-radius: 8px;
border-radius:8px;
}
/*La partie qui englobe toutes les informations */
#M14_label_bloc
{
position:absolute;/*ne pas toucher*/
width:220px;/*la largeur de la colonne en relation avec le template*/
}
/*Le titre Voir son profil*/
#M14_label_bloc p
{
text-align:center;/*on centre le texte*/
color:#fff;/*la couleur de police*/
font-size:11px;/*la taille de la police*/
cursor:pointer;/*on donne un style au curseur*/
}
/*On impose une largeur au bloc*/
#M14_label
{
width:220px;/*la largeur de la colonne en relation avec le template*/
}
/*Positionnement de l icone si active a droite pour eviter toute deformation*/
#M14_label  img
{
float:right;/*on positionne l icone a droite*/
margin-right:5px;/*puis on decale de 5px*/
}

/*Apparence de l intitule*/
#M14_label span
{
margin-left:5px;/*on decale l intitule de 5px de la gauche*/
cursor:pointer;/*on donne un style au curseur*/
font-size:11px;/*la taille de la police*/
color:#55bfcf !important;/*la couleur de police*/
}

/*L infobulle contenant tous les intitules*/
.M14_label_bulle
{
position:absolute;/*ne pas toucher*/
top:30px;/*on affichera l infobulle a 30px du titre*/
padding:10px 4px 10px 4px;/*on applique des espaces en haut droite bas et gauche*/
width: 220px;/*la largeur de la colonne en relation avec le template*/
left:0;/*ne pas toucher*/
display:none; /*ne pas toucher*/
background-color:#fff;/*la couleur de fond*/
color:#55bfcf;/*la couleur de police*/
font-size:10px;/*la taille de la police*/
background-image: url('http://i46.servimg.com/u/f46/11/26/21/37/01210.png');/*l image en haut de l infobulle*/
background-repeat:repeat-x;/*on repete l image*/
background-position:top;/*puis on la positionne en haut*/
cursor:pointer;/*on donne un style au curseur*/
-webkit-border-radius: 8px;/*les bordures arrondies*/
-moz-border-radius: 8px;
border-radius: 8px;
}
/*On affiche l infobulle au survol */
#M14_label_bloc:hover .M14_label_bulle
{
display:block;/*ne pas toucher*/
}
/*On demande que le premier intitule soit place a 25 px du haut*/
#M14_label:first-child
{
margin-top:25px;
}
/*Les informations qui seront affichees dans la petite infobulle*/
#M14_label div
{
display:none;/*ne pas toucher*/
position:absolute;/*ne pas toucher*/
margin-top:-15px;/*ne pas toucher*/
margin-left:168px;/*ne pas toucher*/
width:100%;/*ne pas toucher*/
min-height:30px;/*ne pas toucher*/
font-size:9px;/*La taille de police*/
color:#8fcf3c;/*la couleur de police*/
padding:10px 5px 10px 5px;/*on applique des espaces en haut droite bas et gauche*/
font-size:11px;/*la taille de la police*/
word-wrap:break-word;/*on evite les debordements*/
background-color:#2b1e1d;/*la couleur de fond*/
border:1px solid #8fcf3c;/*l epaisseur style  couleur de bordure*/
/*on applique des bordures arrondies seulement en haut a droite et en bas a gauche*/
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomleft: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
-webkit-transition: all 0.5s ease-in-out;/*une petite transition de 0.5s s appliquera au survol*/
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*on positionne les icones eventuelles a droite dans l infobulle*/
#M14_label div img
{
float:right;/*ne pas toucher*/
border:none;/*ne pas toucher*/
}
/*On affiche l infobulle au survol des intitules */
#M14_label:hover div
{
display:block;/*ne pas toucher*/
}
/*********************Pour l affichage des barres***********************/
/*On applique une correction pour l affichage de la div*/
#M14_label div div
{
background:none;/*ne pas toucher*/
position:absolute ;/*ne pas toucher*/
margin-top:1px;/*Ne pas toucher*/
left:-150px;/*Ne pas toucher*/
border:none;/*ne pas toucher*/
}
#M14_label div:hover div
{
border:none;/*ne pas toucher*/
background:none;/*ne pas toucher*/
}
#M14_label div div:before , #M14_label div div:hover:before
{
border:none;/*ne pas toucher*/
}
/*Fin de correction pour l affichage de la div*/
/*On place la premiere image a gauche*/
#M14_label div div img
{
position:absolute ;/*ne pas toucher*/
float:left;/*ne pas toucher*/
}
/*********************Fin de l affichage des barres***********************/

/*on donne une autre apparence au survol de l infobulle*/
#M14_label div:hover
{
background-color:#141414;/*la couleur de fond*/
border:1px solid #20aec8;/*l epaisseur style  couleur de bordure*/
color:#20aec8;/*la couleur de police*/
}

/*Les effets css3 qui peuvent etre supprimes*/
/*le petit triange a gauche des intitules*/
#M14_label:before
{
content:'';/*Ne pas toucher*/
position:absolute;/*Ne pas toucher*/
margin-left:0;/*Ne pas toucher*/
width: 0px;/*Ne pas toucher*/
height: 0px;/*Ne pas toucher*/
border-style: solid;/*Ne pas toucher*/
border-width: 5px 0 5px 10px;/*Ne pas toucher*/
border-color: transparent  transparent transparent #20aec8;/*changer la couleur*/
-webkit-transition: all 0.5s ease-in-out;/*une petite transition de 0.5s s appliquera au survol*/
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*le petit triange a gauche des intitules au survol*/
#M14_label:hover:before
{
content:'';/*Ne pas toucher*/
position:absolute;/*Ne pas toucher*/
margin-left:150px;/*Ne pas toucher*/
width: 0px;/*Ne pas toucher*/
height: 0px;/*Ne pas toucher*/
border-style: solid;/*Ne pas toucher*/
border-width: 5px 0 5px 10px;/*Ne pas toucher*/
border-color: transparent  transparent transparent #8fcf3c;/*changer la couleur*/
}
/*le petit triange a gauche de l infobulle*/
#M14_label div:before
{
content:'';/*Ne pas toucher*/
position:absolute;/*Ne pas toucher*/
float:left;/*Ne pas toucher*/
left:-10px;/*Ne pas toucher*/
top:1px;/*Ne pas toucher*/
width: 0px;/*Ne pas toucher*/
height: 0px;/*Ne pas toucher*/
border-style: solid;/*Ne pas toucher*/
border-width: 5px 10px 5px 0;/*Ne pas toucher*/
border-color:transparent #8fcf3c  transparent transparent;/*changer la couleur*/
-webkit-transition: all 0.5s ease-in-out;/*une petite transition de 0.5s s appliquera au survol*/
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*le petit triange a gauche de l infobulle au survol*/
#M14_label div:hover:before
{
content:'';
position:absolute;/*Ne pas toucher*/
float:left;/*Ne pas toucher*/
left:-10px;/*Ne pas toucher*/
top:1px;/*Ne pas toucher*/
width: 0px;/*Ne pas toucher*/
height: 0px;/*Ne pas toucher*/
border-style: solid;/*Ne pas toucher*/
border-width: 5px 10px 5px 0;/*Ne pas toucher*/
border-color: transparent #20aec8 transparent transparent;/*changer la couleur*/
}

/*Fin des effets css3 qui peuvent etre supprimes*/

Information demandée:<br />

<!-- BEGIN profile_field -->
      <div id="M14_label">
  <span>{postrow.displayed.profile_field.LABEL}</span>
  <div>Information demandée:<br />{postrow.displayed.profile_field.CONTENT}<br /></div>
  <p>{postrow.displayed.POSTER_RPG}</p>
</div>
<!-- END profile_field -->