[Résolu] Comment afficher une infobulle progressivement ?

Bonsoir,

J'ai tenté d'ajouter transition: 0.5s; mais ça ne fonctionne pas

Mon code :

.infobulle {
  position: relative; 
  cursor: help;
  border-radius: 50%;
}
.infobulle:hover::after, .infobulle:focus::after {
  content: attr(aria-label); 
  position: absolute;
  top: -5em; 
  left: 50%;
  transform: translateX(-50%); 
  z-index: 1;
  white-space: nowrap; 
  padding: 5px 14px;
  background: rgba(0, 105, 151, 0.79);
  color: #fff;
  border-radius: 2px;
  font-size: 1.5rem;
}
[aria-label]:hover:before, [aria-label]:focus:before {
  content: "?";
  position: absolute;
  top: -1.7em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: rgba(0, 105, 151, 0.79);
}
[aria-label]:focus {
  outline: none;
}
.infobulle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 .2em;
  width: 1.2em;
  height: 1.2em;
  color: #413219;
  font-size: 3rem;
  text-align: center;
  text-decoration: none;
}

J'ai testé :

.infobulle {
opacity: 0;
transition: opacity 1s ease;
}

et

.infobulle:hover::after, .infobulle:focus::after {
opacity:1;
}

Mais sans plus de succès

Salut,

Pour ajouter une transition il faut aussi préciser sur quoi tu veux l'appliquer. Par exemple :

transition: all 500ms;

Pour l'appliquer a TOUT ce qui change.

Si tu as un exemple de DOM aussi qui va avec ca pourrais nous servir a reproduire facilement.
Bonne soirée !

goudurisc a écrit :
J'ai testé :

.infobulle {
opacity: 0;
transition: opacity 1s ease;
}

et

.infobulle:hover::after, .infobulle:focus::after {
opacity:1;
}

Mais sans plus de succès

Ah on a répondu en meme temps. Alors la le soucis c'est que tu applique opacity 0 et transition sur ton .info bulle mais le opacity 1 sur le ::after ! C'est pas le meme élément

Ok, merci !

j'ai donc appliqué mon opacité uniquement au hover mais du coup, si l'infobulle est bien masquée au départ, l'élément de texte sur lequel est appliqué l'infobulle disparaît aussi...

.infobulle {
  position: relative; /*les .picto-item deviennent référents*/
  opacity: 0;
  transition: opacity 1s ease;
}
.infobulle:hover {
  opacity: 1;
}

goudurisc a écrit :
Ok, merci !

j'ai donc appliqué mon opacité uniquement au hover mais du coup, si l'infobulle est bien masquée au départ, l'élément de texte sur lequel est appliqué l'infobulle disparaît aussi...

.infobulle {
  position: relative; /*les .picto-item deviennent référents*/
  opacity: 0;
  transition: opacity 1s ease;
}
.infobulle:hover {
  opacity: 1;
}

Du coup c'est l'inverse qu'il faut faire : c'est le ::after qu'il faut mettre a opacity 0 et avec une transition et le passer a 1 quand .infobulle est survolé

Désolé, je ne trouve pas la bonne formule.
...et il faudrait bien entendu inclure dans l'effet la petite flèche (aria-label) sous l'infobulle

En l'état, j'en suis là :

.infobulle {
  position: relative;
}
.infobulle:a::after {
  opacity: 0;
  transition: opacity 1s ease;
}
.infobulle:hover::after  {
  opacity: 1;
}
.infobulle:hover::after, .infobulle:focus::after {
  content: attr(aria-label); 
  position: absolute;
  top: -3em;
  left: 50%;
  transform: translateX(-50%); 
  z-index: 1; 
  white-space: nowrap; 
  padding: 0px 16px;
  background-color: rgba(0, 105, 151, 0.53);
  border-radius: 2px;
  font-size: 1.5rem;
  color: #fff;
  text-transform: none !important;
  font-family: 'Montserrat' !important;
  font-weight: 400 !important;
}
[aria-label]:hover:before, [aria-label]:focus:before {
  content: "?";
  position: absolute;
  top: -0.6em;
  left: 95%;
  transform: translateX(-50%); 
  font-size: 20px;
  color: rgba(0, 105, 151, 0.53);
}
[aria-label]:focus {
  outline: none;
}

Merci beaucoup pour tes explications, et surtout pour ton code ultra pro qui fonctionne à merveille !!! Je vais l'annoter pour la prochaine fois!

J'ai donc juste adapté avec" ? "en remplacement du "?" et supprimé le margin:50px pour que ma bulle reste centrée, d'autant que mon icône de départ (d'où l'infobulle apparaît), qui utilise déjà un effet hover, était impacté par ce margin.
Tu trouveras cette mécanique un peu douteuse mais mes explications mettant en scène le metteur en page sur Wordpress, la bibliothèque du thème et l'utilisation de mes icônes dans tout le site... risquerait de déclencher un malaise.

Je m'en tiens donc à un très grand merci !!

Bonjour,
J'ai déjà eu à faire ce genre d'exercice mais c'est super compliqué, je me perds un peu dans tout ce code surtout que la transition, c'est plus pour apporter une opacité graduelle, non ?

oui, aujourd'hui, je crois que ce n'est pas top d'afficher un élément quel qu'il soit sans effet progressif ou de transition...

Bon ben je suis un peu obligé de tempérer un tout petit peu ma joie car si mon infobulle est parfaite (encore merci!), une petite part de son CSS soit [aria-label] rentre en conflit avec l'icône "retour haut de page" de mon thème.

Comme je ne peux pas trop intervenir sur ces éléments de thème, serait- il possible d'adapter/personnaliser cette partie de CSS :

[aria-label]::before, [aria-label]::before {
  content: "?";
  position: absolute;
  top: -0.6em;
  left: 95%;
  transform: translateX(-50%);
  font-size: 20px;
  color: rgba(0, 105, 151, 0.53);
  outline: none;
  opacity: 0;
  transition: opacity 1s ease;
}
[aria-label]:hover::before, [aria-label]:focus::before {
  opacity: 1;
}

...et en fait, je constate que le code [aria-label] affecte la totalité des petites icônes de mon thèmes.
Mais bon, ce serait dur de devoir renoncer à la petite languette de mon infobulle qui m'a demandé tant de travail, j'espère qu'il existe une solution.

J'ai peut-être abusé ? Pas de solution "simple" ?