Infobulle et transition

[Otomo1616]

Bonjour bonjour !

Voilà, je viens vous demander de l'aide concernant l'infobulle. Je désirerais faire apparaître les informations du profil sur l'avatar en infobulle et ce progressivement, une apparition progressive.

J'ai trouvé mille et un tuto, mille et une explication sur le sujet, j'ai essayé pas mal de chose sans arriver à faire quelque chose de fluide et de normal. Mon infobulle est là en revanche la transition est catastrophique... =/

Du coup voilà, j'espère que quelqu'un pourra me montrer et m'expliquer où sont mes erreurs car ce problème me tracasse la tête depuis pas mal de temps >.<

• Mon CSS :

Spoiler:

• Mon template modifié :

Spoiler:

Merci d'avance ! ^^

[MlleAlys]

Bonjour,
essayez avec ce template :

Code:

<div class="postdetails poster-profile">{postrow.displayed.POSTER_RANK}
    <br />{postrow.displayed.RANK_IMAGE}
    <!-- DEBUT PROFIL MODIFIÉ : Infos de profil en infobulle -->
    <div class="ProfilInfobulle">
        {postrow.displayed.POSTER_AVATAR}
        <br/>
        <br/>
        <div>
            <!-- 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}
        </div>
    </div>
    <!-- FIN PROFIL MODIFIÉ -->
</div><br />

(la mise en forme ne change rien, par contre il manquait le caractère ">" pour fermer la dernière div à la fin)

Pour le css, il vaut mieux mettre tout le style de l'infobulle dans div.ProfilInfobulle > div puisque même invisible, elle garde sa place et sa mise en forme. La seule chose qui va rester dans div.ProfilInfobulle > div:hover est donc ce qui change quand on passe la souris dessus, c'est à dire l'opacité.
Pour l'effet de transition, c'est le passage de display:none; à display:block; qui la contrarie, et garder l'opacité suffit ^^ :

Code:

div.ProfilInfobulle {
    position: relative; /* on définit le bloc comme élément de référence */
    cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}
div.ProfilInfobulle > div {
    position: absolute; /* on positionne notre infobulle par rapport au bloc conteneur */
    top: 0px;
    left: 0px;
    width:190px; /* largeur de l’infobulle */
    height:300px; /*hauteur de l'infobulle*/
    border: 1px dotted black; /* bordures de l'infobulle : épaisseur style couleur*/
    padding: 3px; /* marges internes par rapport aux bords */

    background: #ebebeb; /* arrière-plan de l’infobulle */
    color: black; /* couleur du texte dans l’infobulle */
    font-size: 10px; /*taille de la police */
    -moz-border-radius: 7px 0px 7px 0px;
    -webkit-border-radius: 7px 0px 7px 0px;
    border-radius: 7px 0px 7px 0px; /*angles arrondis*/
    -moz-box-shadow: 0px 0px 4px #000;
    -webkit-box-shadow: 0px 0px 4px #000;
    box-shadow: 0px 0px 4px #000; /*ombre portée*/
   
    opacity: 0; /* infobulle complètement transparente */
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -ms-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease; /*transition de la propriété opacité, durée de la transition, transition adoucie*/
}

div.ProfilInfobulle:hover {
    background: none; /* correction d'un bug IE */
}

/* Lorsqu'on survole le contenu du bloc */
 div.ProfilInfobulle:hover > div {
    opacity:1; /*l'infobulle devient opaque*/
}

Tout ce qui est appliqué à élément est encore appliqué à élément:hover

[Otomo1616]

D'accord !

Forcément avec toute ces petites erreurs le code était légèrement contrarié ! ^^' Le codage fonctionne parfaitement maintenant avec ces modifications. =)

En tout cas je vous remercie et pour votre aide et pour vos explications qui m'ont permis de mieux comprendre mes erreurs.

Merci !