Infobulle et transition

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Infobulle et transition

Message par Otomo1616 le Jeu 19 Fév 2015 - 14:04

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:
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 {
  display: none; /* masque l’infobulle par défaut */
 opacity: 0;
  /* On règle ici la transition */
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
}

div.ProfilInfobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */
}

/* Lorsqu'on survole le contenu du bloc */
div.ProfilInfobulle:hover > div {
  display: block; /* Affiche l’infobulle (on peut aussi utiliser inline au lieu de block) */


  /* on positionne notre infobulle par rapport au bloc conteneur */
  position: absolute;
  top: 0px; /* 5px par rapport au haut du bloc .ProfilInfobulle (= par rapport à l’avatar) */
  left: 0px; /* 15 px par rapport à la gauche du bloc .ProfilInfobulle */

  /* Et puis on rajoute tous les éléments de mise en forme de l’infobulle */
  background: #ebebeb; /* arrière-plan de l’infobulle */
  color: black; /* texte dans l’infobulle */
  padding: 3px; /* marges internes par rapport aux bords */
  border: 1px dotted black; /* bordures de votre infobulle : épaisseur style couleur*/
  width:190px; /* largeur de l’infobulle */
  height:300px;
  -moz-border-radius: 7px 0px 7px 0px ; /*angles arrondis*/
  -webkit-border-radius: 7px 0px 7px 0px ; /*angles arrondis*/
  border-radius: 7px 0px 7px 0px ; /*angles arrondis*/
  -moz-box-shadow: 0px 0px 4px #000; /*ombre portée*/
  -webkit-box-shadow: 0px 0px 4px #000; /*ombre portée*/
  box-shadow: 0px 0px 4px #000; /*ombre portée*/
  font-size:10px; /*taille de la police */
  color:#000; /* couleur de la police */
    opacity:1;
  -webkit-transition: all 1s ;
        -moz-transition: all 1s ;
        -ms-transition: all 1s ;
        -o-transition: all 1s ;
        transition: all 1s ;
 
}


• Mon template modifié :
Spoiler:
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 />

Merci d'avance ! ^^


Dernière édition par Otomo1616 le Jeu 19 Fév 2015 - 17:45, édité 1 fois

Otomo1616
Nouveau membre

Messages : 2
Inscrit(e) le : 19/02/2015

http://jetest-forum.forumactif.org/
Otomo1616 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle et transition

Message par MlleAlys le Jeu 19 Fév 2015 - 16:42

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

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle et transition

Message par Otomo1616 le Jeu 19 Fév 2015 - 17:45

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 ! I love you

Otomo1616
Nouveau membre

Messages : 2
Inscrit(e) le : 19/02/2015

http://jetest-forum.forumactif.org/
Otomo1616 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum