Discussion :

[PIEPLU]

Bonjour,

Je cherche à faire une bulle en tout CSS. Voici ce que j'ai fait pour le moment
http://jsfiddle.net/UG79Z/

Mon problème, c'est que je n'arrive pas à mettre la bulle à la suite du "Vérifié". Auriez-vous une idée ?

Merci

[NoSmoking]

Bonjour,
il te faut légèrement changer ton approche et mettre toute ton InfoBulle dans le même conteneur par exemple un SPAN

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="contentBulle">
    Vérifié
    <span>
      <div class="contentBulleFleche"></div>
      <div class="contentBulleDescription">
        Hello world !
      </div>
    </span>du texte après...
</div>

ensuite on ne s'intéresse qu'au SPAN

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.contentBulle span{
  display:none;
  position:relative;  /* place à la fin */
  top:-24px;          /* replace en haut */
  white-space:nowrap; /* pas de retour à la ligne */
}

et pour le hover on se contente de

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.contentBulle:hover span{
/*  .contentBulleFleche,.contentBulle:hover .contentBulleDescription { /* SUPPRIME */
  display:inline-block;
}

concerant les éléments du SPAN il suffit de supprimer le display:none et laisser faire...

[PIEPLU]

Parfait, merci