Blog iamvdo.meVoici un exemple de réalisation de popup avec l’utilisation de CSS. Suivez le tutoriel pour recréer cet effet.
Le balisage
Voici le code HTML utilisé : un simple paragraphe, composé d’un lien, lui même contenant un span.
<p>
<a href="#">Hover Me!
<span>I'm a popup...</span>
</a>
</p>Mettre en forme les liens
Ajoutez d’abord les styles CSS sur les liens (couleur, ombre sur texte), puis sur les liens hover et focus.
a{
color:#ccc;
text-shadow:0 -1px 0 black;
}
a:hover,a:focus{
background:rgba(0,0,0,.4);
box-shadow:0 1px 0 rgba(255,255,255,.4);
}J’utilise rgba pour gagner du temps, mais attention, ce n’est pas reconnu dans tous les anciens navigateurs.
Mettre en forme la popup
Par défaut, une popup doit apparaitre en superposition par rapport au texte, donc un positionnement absolu s’impose.
a span{
position:absolute;
}On positionne : j’utilise margin pour un positionnement par rapport à sa position normale dans le flux (c’est à dire sans le position:absolute). Cela permet de gérer un décalage relatif.
a span{
...
margin-top:23px;
margin-left:-35px;
}Puis, je mets en forme...
a span{
...
color:#09c;
background:rgba(0,0,0,.9);
padding:15px;
border-radius:3px;
box-shadow:0 0 2px rgba(0,0,0,.5);
}Utilisation des transformations et des transitions
J’ajoute en premier lieu la transformation au span. Une échelle à 0 et une rotation de -12deg.
a span{
...
transform:scale(0) rotate(-12deg);
}Lors du hover (et du focus) sur le lien, je modifie la transformation du span. J’applique une échelle de 1 et une rotation de 0deg.
a:hover span, a:focus span{
transform:scale(1) rotate(0);
}Puis, pour créer un joli effet entre les deux états, j’applique en CSS la transition sur les span, en précisant que je souhaite animer toutes les propriétés (all) et que l’effet dure 1/4 de seconde.
a span{
...
transition:all .25s;
}Effet de transparence
Pour ajouter l’effet de transparence, il suffit d’ajouter une opacité de 0 sur les span, puis de modifier cette opacité à 1 lors du changement d’état. L’effet sera appliqué progressivement grâce à la règle transition appliquée précédemment.
a span{
...
opacity:0;
}
a:hover span, a:focus span{
...
opacity:1;
}L’effet est donc finalisé. Adaptez ensuite à votre convenance au niveau des transformations, de la durée des transitions...
Laissez vos commentaires sur le tutoriel plus bas !
#1par L44, le 8 octobre 2011
Pas mal ! Surtout l’animation.
Sauf que c’est pas des popups mais plutot des infobulles...
#2par css3create, le 9 octobre 2011
@L44:c’est vrai ! Du coup, j’ai mis à jour le nom de l’article. Merci.
#3par Dreamer, le 22 octobre 2011
Il semblerait que ce tutoriel ne fonctionne pas sur IE8, avez-vous une solution ou un hack pour que ceci fonctionne !!
Merci.
#4par afrika1043, le 20 novembre 2011
Merci pour le tuto ! mais comment on fais pour avoir aussi la petite flèche en dessus de l’info bulle ?
#5par css3create, le 20 novembre 2011
@afrika1043 : vous pouvez regarder cet article : Boutons Suivant Précédent
#6par Geoffrey, le 25 novembre 2011
Hello,
@Dreamer : voici une technique qui fonctionne sous IE8 http://www.alsacreations.com/astuce...
Il va cependant falloir mixer entre les deux techniques, et trouver un compromis pour avoir des infobulles qui fonctionnent partout.
Peut-être voir du côté des commentaires conditionnels : http://www.alsacreations.com/astuce...
#7par Del, le 21 décembre 2011
Salut,
Avant tous super tutoriel, beau rendu, belle effet, par contre tu as oublier
de précisez dans le css (a span ::before) avec les instructions associés j’ai
du chercher vite fait sur ton site le css qui relie à ce tuto. Voila sinon très
beau résultat.
Cordialement Del
#8par Thomas, le 8 juin 2012
Bonjour, tuto vraiment sympa, mais j’ai un petit problème. Sur chrome, l’infobulle marche, mais lorsque je passe la souris sur le span (qui est censé être invisible) il s’affiche en rouge avec un fond noir transparents.. Une idée ?
Cordialement
Thomas
#9par css3create, le 8 juin 2012
@Thomas : C’est bizarre que tu puisses survolé les
spans’ils sont masqués...#10par goseb, le 16 août 2012
Hyper merci pour ce tuto !
#11par ibrabiga, le 1er septembre 2012
tres joli tuto
#12par Draginkilled, le 19 septembre 2012
Bonjour, super tuto, cependant, je retrouve le même problème que @Thomas, même en opacité 0, en survolant l’infobulle, elle apparait ... Je ne maitrise pas le ::after and :: before, c’est peut être ça ?
#13par Draginkilled, le 20 septembre 2012
Je viens de faire pas mal de recherche à ce sujet, et pour moi, ça venait d’un
a.info span
display : none ;
pour ne pas l’afficher :) Tout simplement :) Si ça peut servir à d’autre essayer avec "display"
#14par GoldenFisch, le 25 septembre 2012
Merci pour ce joli tuto, je viens d’essayer de l’adapter à une map et s’il est vrai que j’arrive à avoir mon info bulle, je souhaiterai par contre qu’après le clique, la bulle reste active comme chez toi et là je n’y arrive pas.
Pourrais-tu me donner le tuyau qui permet d’y arriver ?
Seraient-ce les propriétés before et after ? Si oui, un canevas svp merci et encore merci pour tout
#15par minedun6, le 9 octobre 2012
bon, soit j’arrive pas à lire comme il faut soit y a un truc qui merde !!
Je viens de tester le code que vous avez poster et ça ne me fait pas les effets que je trouve ici !
De même que je teste sur le dernier chrome !!
#16par Draginkilled, le 10 octobre 2012
Bonjour à tous, j’ai réussit à reproduire exactement la même chose sur mon site ^^ alors pourquoi pas vous ? Il ne suffit pas simplement de faire un copier coller du code donné, et hop : Ça marche ... Non, il faut aller chercher plus loin et amener vos connaissances dans l’élaboration de ce style. Recherchez sur internet, revoyez vos bases en html/css, toutes les réponses se trouvent là :) Je suis pas plus doué qu’un autre, alors vous devriez y arriver ^^
#17par Garsdunord, le 11 octobre 2012
Superbe l’effet et très bien expliqué
Par contre j’ai un petit problème quand je veux remplacer le texte (Hover me ! par exemple) par une image avec un lien sur une nouvelle page internet.
Je pense que je me plante au niveau du html car je fais cela :
A moins que je me vautre au niveau CSS j’ai conservé toutes les lignes.
Merci d’avance.
#18par Garsdunord, le 11 octobre 2012
Encore moi !
En fait je dis des conneries, avec une image et un lien url cela fonctionne. Par contre ce qui ne fonctionne pas c’est l’aparition de l’info bulle au ralenti comme si la fonction transition:all .25s ; était ignorée, non seulement avec des images mais aussi avec du texte .J’ai fait le test avec firefox 14.01 et IE 9.0.811
Merci.
#19par css3create, le 11 octobre 2012
@Garsdunord : pour les transitions, il faut penser aux préfixes ! Voir l’article sur les transitions
#20par @Garsdunord, le 12 octobre 2012
@css3create : Les préfixes ! mais je ne pense qu’à cela ! :-)
Plus sérieusement est-ce que quelqu’un aurait la gentillesse de poster le code css complet pour arriver au résultat de l’exemple ? Car même en plaçant des webkit-transition un peu partout je n’y arrive pas.
Merci d’avance.
#21par css3create, le 12 octobre 2012
@Garsdunord : Clic-droit -> Code source de la page... Tout est dans l’entête !
#22par Rhuarck, le 9 novembre 2012
Merci pour ce super tuto ! Au départ j’avais le même problème que @Thomas mais grâce à la solution de @Draginkilled problème résolut ! Bon par contre on perd l’effet d’animation au survol mais ça pas bien grave
#23par Hugo470, le 2 décembre 2012
Merci pour ce super tuto et pour votre site qui me permet d’apprendre le css3, mais j’aimerais savoir quelle est la ligne de code qui contrôle la couleur de la petite flèche svp car je ne la trouve pas...
Merci d’avance :)
#24par css3create, le 2 décembre 2012
@Hugo470 : Regarde l’article Boutons Suivant Précédent pour les flèches. C’est une utilisation détournée des bordures et des pseudo-éléments !
#25par Peachy Keen, le 7 décembre 2012
Ça marche niquel... Personnellement je l’ai fait sur une image et non un lien en rajoutant une petite span et c’est super. Maintenant, il ne me reste plus qu’à regarder un peu les différents effets de transitions pour voir lequel me plaît le plus ! :D
Merci pour ce partage !
#26par Erlin, le 26 décembre 2012
Bonjour,
C’est génial comme effet mais je rencontre un problème selon le navigateur utilisé. Sur chrome la bulle reste en place mais sur mozilla celle ci disparait après l’effet. Y a t-il un solution pour y remédier ?
#27par lolita84, le 3 janvier 2013
Merci infinément pour ce super tutto, j’ai essayé cet exemple ca marche nikel mais j’ai un petit soucis j’ai pas trouvé comment ajouter le petit fléche en haut de l’info bulle.
#28par Baron, le 18 janvier 2013
Salut !
Super tuto !!!
Sur tous les navigateurs, sa marche impek !!!
Mais sur la machine d’un contact, les spans sont déjà affichés sans style.
Un idée ? merci !
#29par eliza, le 29 janvier 2013
Bonjour,
pour faire la petite flèche, voici un exemple à adapter à votre infobulle :
.ActifIcon span:after [
border : solid transparent ;
content : " " ;
height : 0 ;
width : 0 ;
position : absolute ;
border-bottom-color : #292a29 ;
border-width : 4px 0px 4px 4px ; //demi-triangle
left : 0 ;
margin-left : -4px ;
bottom : 12px ; //placer en hauteur
]
#30par letizia, le 19 février 2013
Super, c’est génial, merci beaucoup !
#31par M1ke55, le 23 avril 2013
Même problème que @Thomas réglé avec "-webkit-" devant "transform : scale(x) rotate(x) ;"
#32par Phil, le 30 mai 2013
bonjour
c’est vraiment top comme effet c’est ce que je cherche mais hélas impossible de le faire marcher :( j’ai juste un petit rectangle noir qui s’affiche et tout le temps affiché, avant même de passer la souris dessus
est ce que vous pourriez m’expliquer ce qui pourrais clocher ? merci
#33par phil, le 4 juin 2013
bonjour
bon super ça marche j’ai réussi à me débrouillé !
par contre comment est il possible de mettre un titre dans l’info bulle ? est ce compliqué ?
merci
#34par Nking, le 7 juin 2013
Bonjour,
Merci pour cet excellent tuto, j’ai pu réaliser ces infobulles sans problèmes sur une image map, et tout fonctionne nickel, je travaille sur firefox et aucun soucis, seulement, lorsque je lance ma page sur IE ou Chrome, les infobulles ne s’affichent pas, est ce qu’on pourrait m’aider ?
#35par Connors, le 5 juillet 2013
Merci pour le tuto, ceux qui aurai un problème au niveau de l’affichage du Span quand on passe sa souris dessus, remplacez le "opacity : 0 ;" par "visibility:hidden ;" et "opacity:1 ;" par "visibility:visible ;". Tout du moins pour moi ça a fonctionné.
Encore merci !
#36par Kimel’, le 5 août 2013
Bonjour ( :
Merci beaucoup pour ce tutoriel ! ça marche nickel chez moi ! C’est un très jolie rendu, j’aime beaucoup !
#37par drissbouda, le 15 août 2013
merciiiii beaucoup les mecs (y)
#38par Ladidou, le 17 octobre 2013
Bonjour, j’ai trouvé super ce tuto, facile à suivre et à modifier selon ses envies. Mais drame au moment de le mettre en ligne : Tout débloque avec Firefox sur Mac... Le span s’affiche en dessous du texte (juste le texte, pas de fond de couleur ou quoi que ce soit) et il n’y a plus du tout la possibilité de faire apparaître de bulle... suis super déçue. Une idée pour remédier à ce problème ?
Et encore merci pour toutes ces superbes infos recueillies sur ce site, c’est génial !
#39par Thom, le 26 novembre 2013
Le tuto est excellent, merci beaucoup pour mon site. www.thomaero.ovh.org
J’aimerai juste savoir comment éviter que l’info bulle reste active après un click sur le lien ? car ça gêne la lecture des autres info bulle lorsqu’on déplace la souris. Merci d’avance.
Par contre mon site bug sous IE comme pas permis, jsuis pas assez doué pour corriger ça.