Code fonctionnel sur un forum, mais pas sur un autre (pHpBB2)

[Kâ Lys]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir à tous! Je rencontre un autre petit soucis avec mon CSS. Voyez-vous, il faudra bien me l'expliquer celle là. J'ai deux forum tous deux sous pHpBB2, je copie colle un code. Je copie-colle, dis-je bien. Sur un forum il fonctionne, sur l'autre pas du tout.

Le code en question est une simple info-bulle qui apparaît au survol d'un texte.

Voici le code :

Code:

.infb2 {
  position: relative;
}

.infb2, .infb2-hidden {
  display: none; 
  position: absolute;
  visibility: visible; 
  z-index: 999;
  background-color: #303030;
  padding:5px;
  width: 200px;
  font-size: 12px;
  text-align: justify;
  font-family: Times New Roman;
  border: 2px solid #000;
  box-shadow: 0px 0px 3px #000;
}
.infb2:hover, .infb2-hidden {
 display: inline;
}

Sur un forum il fonctionne, mais sur l'autre il fait tout simplement disparaître le mot auquel il est associé.

[Kâ Lys]

J'ai honte! x) Le code est mauvais et incomplet, c'est pour cela, mais je tiens tout de même à fournir la version adaptée pour les prochains ne sachant trop comment faire :

Les balises HTML qui permettront au CSS de faire leur effet :

Code:

<span class="conteneur"><span class="cible">Mot ou phrase qui verront une infobulle apparaitre une fois que la souris les survoleront.</span> <div class="infobulle">Le texte ou l'image contenu dans l'infobulle qui reste invisible jusqu'à ce que la souris survole le mot ou la phrase contenu dans la balise "cible".</div></span>

Le conteneur doit contenir la cible de l'infobulle et l'infobulle elle-même.

Voici le CSS :

Code:

.conteneur {
position: relative;
overflow: visible;
}

.conteneur .cible {
color: blue;
}

.conteneur .cible:hover {
color: red;
}

.conteneur .infobulle {
position: absolute;
max-width: 200px;
max-height: 100px;
background-color: #C1BFBF;
-webkit-transform: rotate(360deg) scale(0);
transform: rotate(360deg) scale(0);
visibility: hidden;
transition: all ease 1s;
}

.conteneur:hover .infobulle {
visibility: visible;
z-index: 999:
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
transition: all ease 1;
}

Vous modifiez à souhait et il existe une multitude d'effet de transformation, ne vous contenter pas de l'exemple fourni.

Voici un lien au tutoriel qui fourni de plus ample renseignement : http://www.never-utopia.com/t49280-creer-une-infobulle?highlight=infobulle

EDIT : Les span c'est pour éviter un retour à la ligne que les DIV impose. La cible de l'infobulle pourra donc se retrouver dans un paragraphe sans que le code bousille la mise en page en faisant un saut de ligne.