27576 sujets

CSS et mise en forme, CSS3

Bonsoir,

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

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
Modérateur
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 !
Modérateur
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 Smiley smile
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;
}
Modérateur
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 Smiley smile 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;
}
Modérateur
Alors alors

.infobulle:a::after {

il y a un :a en trop

.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;
}

Met tout le style de l'élément sur sa version non survolée, car sinon le style ne va s'appliquer que s'il est survolé et les transitions ne peuvent pas se faire (même si ici ton opacity est bien placée, c'est une bonne pratique de mettre le style par defaut pour pas avoir de soucis apres)


[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);
}

Idem ici et il manque des double points.

En gros ton architecture ca doit etre :
.infobulle {
  /* Le style du texte */
}
.infobulle::after {
  opacity: 0;
  transition: opacity 1s ease;
  /* le style de ton infobulle */
}
.infobulle:hover::after,
.infobulle:focus::after {
  opacity: 1;
}

Voila :
https://jsfiddle.net/undless/fnr9ydb5/

J'ai déplacé un peu le ::after pour le voir parceque ton positionnement est vraiment bizarre :
position: absolute;
  top: -3em;
  left: 50%;
  transform: translateX(-50%); 


Smiley smile
Modifié par _laurent (08 Dec 2020 - 00:47)
Meilleure solution
Merci beaucoup pour tes explications, et surtout pour ton code ultra pro qui fonctionne à merveille !!! Smiley cligne 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 !! Smiley cligne
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 Smiley decu 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...
...et compliqué, certainement, mais je crois que sans l'aide pro de Laurent, je serais encore en train de patauger dans le code et les tutos douteux !
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. Smiley ohwell

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. Smiley rolleyes