Comment créer des info-bulles CSS3 sans script

Ahhh? info-bulles. Ils peuvent être la réponse à beaucoup de vos soucis de support ou si vous voulez juste donner un petit indice à l'utilisateur. Aujourd'hui, il existe des tonnes de sites Web et d'applications utilisant des info-bulles, mais? Y a-t-il une meilleure façon de les mettre en œuvre? Je suis ravi de dire qu'il existe un meilleur moyen, un moyen sans Javascript? Bien, pour la majeure partie. Nous allons créer des infobulles vraiment géniales avec du CSS3 pur, puis nous allons créer une version compatible avec les appareils mobiles. C’est là que la situation devient un peu floue car pour que cela fonctionne, Correction Javascript connue sous le nom de Dean Edwards IE9.js.

Remarque: la version IE et les versions ultérieures sont prises en charge par IE. IE7 est également pris en charge sauf pour la version mobile (version cliquable).

Le tutoriel vidéo

Pour tous ceux qui veulent découvrir comment Justin crée cela dans une couleur vivante, regardez la vidéo ci-dessous!

Le tutoriel écrit

Et maintenant, le guide complet écrit, étape par étape, avec des instructions entièrement codées. Assurez-vous également de télécharger le fichier source ci-dessus.!

Étape 1 Création du balisage

Dans la tête

Commençons par créer la tête de notre document, puis insérons une feuille de style spécialement pour ce tutoriel. Vous pouvez supprimer la feuille de style tut.css lors de l’implémentation dans votre propre projet, elle n’est utilisée que pour ce tutoriel..

Nous avons utilisé le type de document HTML5, qui est! DOCTYPE html, puis appelé nos deux feuilles de style. La première feuille de style est la version de transparence, mais il y a plus de thèmes parmi lesquels choisir dans les fichiers source. La seconde est le tut.css dont nous avons parlé et n’est utilisée que pour styliser ce tutoriel, mais n'hésitez pas à l’utiliser si vous le souhaitez..

Après les feuilles de style, est notre déclaration inférieure à IE9. Nous avons utilisé un fichier ie.css qui appelle CSSPIE pour indiquer à IE 7 et 8 qu'il est correct d'utiliser les fonctionnalités CSS3 car elles sont géniales! Nous avons ensuite fait appel à Dean Edwards IE9.js pour indiquer à IE7 et 8 que nous devions faire en sorte que cela fonctionne avec des sélecteurs CSS avancés..

    Info-bulles CSS3 - Survol et cliquable

"L'utilisateur pourra déplacer sa souris de l'élément à l'info-bulle afin de cliquer sur les liens."

L'info-bulle Websafe

Maintenant que nous avons créé notre tête, nous allons maintenant créer le balisage de notre première info-bulle. Pour ce tutoriel, nous allons utiliser une liste non ordonnée, mais vous pouvez utiliser n'importe quoi car dans le CSS, nous utilisons uniquement le nom de la classe au lieu de la sélectionner elle-même, ce qui permet d'insérer simplement les classes où vous voulez..

La classe tip (ie: li) est utilisée pour le texte ou l'image qui sera survolé pour afficher l'info-bulle. À l'intérieur de cela, nous avons ajouté un lien avec un hachage et le hachage est fait pour que notre lien soit accessible.
Après la classe tip, la classe tooltipL (c'est-à-dire: strong) est utilisée pour toutes les info-bulles qui s'afficheront à gauche de votre élément survolé, dans ce cas, le premier lien..
Il est même possible d'ajouter des images et des liens dans votre info-bulle. L'utilisateur pourra déplacer sa souris de l'élément survolé à l'info-bulle afin de cliquer sur des liens. cette fonctionnalité est prise en charge dans le stylehseet dont nous parlerons plus loin dans ce tutoriel.

  Astuce gaucheAjouter des images dans l'info-bulle.  Vous pouvez même ajouter des liens!

L'exemple ci-dessus sera suivi du reste des info-bulles que nous allons créer. Essentiellement, tout sera identique pour chaque info-bulle. Les seules différences ou les classes. Au lieu de tooltipL, nous avons .tooltipR pour toutes les info-bulles placées à droite de l'élément survolé, .tooltipB qui est placé en bas et .tooltipT qui est placé en haut. Chaque fois que vous souhaitez ajouter une nouvelle info-bulle à votre projet, il vous suffit d'utiliser l'une de ces classes en fonction de l'endroit où vous souhaitez afficher l'info-bulle..

 Bon conseilAjouter des images dans l'info-bulle.  Vous pouvez même ajouter des liens!
 Bout inférieurAjouter des images dans l'info-bulle.  Vous pouvez même ajouter des liens!
 Top ConseilAjouter des images dans l'info-bulle.  Vous pouvez même ajouter des liens!

L'info-bulle mobile conviviale

La principale différence entre ce type d’info-bulle et la version Websafe est que nous utilisons une classe différente (c'est-à-dire: .tipClick) et la rendons simplement cliquable. Sur les téléphones mobiles, vous ne pouvez pas survoler quelque chose comme une info-bulle pour le faire apparaître afin que cette version résout ce problème. C'est aussi génial pour le contenu orienté vers l'action.

  Astuce gaucheAjouter des images dans l'info-bulle.  Vous pouvez même ajouter des liens!
 Bon conseilAjouter des images dans l'info-bulle.  Vous pouvez même ajouter des liens!
 Bout inférieurAjouter des images dans l'info-bulle.  Vous pouvez même ajouter des liens!
 Top ConseilAjouter des images dans l'info-bulle.  Vous pouvez même ajouter des liens!

C'est tout ce qu'il y a aussi le balisage HTML. Voyons maintenant un peu de CSS pour rendre ce bébé fonctionnel!

Étape 2 Rendez-le fonctionnel et créez des styles avec CSS

Pour ce tutoriel, nous allons utiliser le style tip-transparency.css mais, encore une fois, vous avez le choix entre plusieurs styles, choisissez donc celui que vous préférez suivre..

Pour commencer, nous allons ajouter quelques styles à nos classes principales..
Ici, nous ajoutons une position relative et un affichage de inline-block afin que l'info-bulle reste en ligne avec l'élément survolé.

 .tip, .tipClick / * Ceci est un élément auquel une info-bulle est également attachée * / position: relative! important; affichage: inline-block;

Ensuite, nous voulons masquer toutes les info-bulles jusqu'à ce qu'elles soient survolées ou cliquées. Pour ce faire, nous allons simplement sélectionner la classe pour chaque direction et utiliser un affichage: aucun

 .astuce> .tooltipL, .tip> .tooltipB, .tip> .tooltipR, .tip> .tooltipT, .tipClick> .tooltipL, .tooltipR, .tipClick> .toolClip> .toolClip> .toolClip> .toolClip>. pour masquer l'info-bulle * / display: none;

Pour afficher l'info-bulle lorsque vous la survolez ou cliquez dessus, nous allons faire exactement le contraire en la cachant et en utilisant un bloc display après avoir sélectionné la classe pour chaque direction..
Pour les info-bulles cliquables, nous allons ajouter un focus à l'élément survolé (c'est-à-dire: le premier lien) et ensuite nous allons faire correspondre l'info-bulle précédente en utilisant le sélecteur plus (c'est-à-dire: a: focus + .tooltipL).

 .astuce: survol> .tooltipL, .tip: survol> .tooltipB, .tip: survol> .tooltipR, .tip: hover> .tooltipT, / * Ceci affiche l'info-bulle lorsqu'un élément de la classe .tip est survolé * / .tipClick> a: focus + .tooltipL, .tipClick> a: focus + .tooltipB, .tipClick> a: focus + .tooltipR, .tipClick> a: focus + .tooltipT / * Ceci montre l'info-bulle une fois un élément avec la classe .tipClick est cliquée * / display: block;

Maintenant que nous avons une info-bulle pratique, allons-y et appelons-les. Pour la plupart, chaque info-bulle, qu'elle soit à gauche, à droite, en haut ou en bas, sera la même, à quelques différences près, que j'expliquerai plus tard..

Comme vous pouvez le constater, nous voulons que chaque info-bulle ait la même apparence, afin d’avoir des arrière-plans communs utilisant une opacité de 85%. Il y a une ombre de boîte pour ajouter un peu de profondeur, avec une bordure solide pour séparer le contenu interne..
Quelques faits importants ici sont? le min-width: 200px pour garder la flèche alignée avec l'élément survolé, une position d'absolu afin de pouvoir afficher l'info-bulle sans affecter les éléments qui l'entourent, et un z-index de 10 pour que l'info-bulle soit toujours au-dessus.

 .tooltipL, .tooltipR, .tooltipB, .tooltipT background: # 333333; / * anciens navigateurs * / background: rgba (0,0,0,0,85); / * Pour IE9 * / arrière-plan: -moz-linear-gradient (haut, rgba (51,51,51,0,85) 0%, rgba (0,0,0,0,85) 100%); / * firefox * / background: linéaire-gradient (en haut, rgba (51,51,51,0,85) 0%, rgba (0,0,0,0,85) 100%); / * futurs navigateurs * / -pie-background: linear-gradient (top, rgba (51,51,51,0.25) 0%, rgba (0,0,0,0,25) 100%); / * tarte pour moins que ie9 * / background: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0%, rgba (51,51,51,0.85)), couleur-stop (100%, rgba (0,0,0,0,85))); / * webkit * / -moz-box-shadow: 0 0 6px 1px # 666666; -webkit-box-shadow: 0 0 6px 1px # 666666; box-shadow: 0 0 6px 1px # 666666; bordure: solide #FFFFFF; couleur: # E7E7E7; largeur minimale: 200px; rembourrage: 5px; position: absolue; text-align: center; z-index: 10;

Donc, pour les différences dans chaque info-bulle, c’est leur position par rapport à l’élément de survol. Ces valeurs semblaient fonctionner le mieux et ne devraient pas être modifiées. Cependant, si elles doivent être modifiées pour s’adapter à votre projet, la meilleure solution serait alors d’utiliser un repositionnement dynamique en utilisant javascript. mais c'est au-delà de la portée de ce tutoriel.

En regardant le code CSS ci-dessous, vous pouvez constater que nous devons republier les info-bulles afin qu’elles soient alignées avec leur élément de survol respectif, alors qu’utiliser une position relative sur les classes principales conservait les info-bulles contenues dans l’élément de survol. eux à côté.

 .tooltipL / * Le style de l'info-bulle * / left: -226px; marge supérieure: -28px;  .tooltipB / * Le style de l'info-bulle * / top: 30px; à gauche: -183px;  .tooltipR / * Le style de l'info-bulle * / right: -226px; marge supérieure: -28px;  .tooltipT / * Le style de l'info-bulle * / bottom: 26px; à gauche: -186px;

Presque fini! Maintenant, nous devons créer la flèche pour notre info-bulle qui pointe vers l’élément de survol. Encore une fois, il y a quelques différences que je vous montrerai plus tard.

En regardant le code ci-dessous, nous insérerons la flèche "avant" chaque info-bulle. Ce qui est important ici et pourquoi nous pouvons faire une flèche en utilisant CSS est la déclaration "content". Nous allons ajouter une position absolue pour pouvoir positionner la flèche comme bon nous semble. Mettez un affichage: bloc et une hauteur / largeur de 0, avec une bordure solide de 10 pixels qui agira comme notre flèche réelle.

 .tooltipL: before, .tooltipR: before, .tooltipB: before, .tooltipT: before border-style: solid; largeur de la bordure: 10 px; hauteur: 0px; largeur: 0px; position: absolue; bloc de visualisation; contenu: "\ 00a0";

La différence ici réside dans la direction dans laquelle nous voulons que la flèche pointe et nous utilisons pour cela un arrière-plan solide pour un côté et un arrière-plan transparent pour le reste. De plus, nous devons déplacer chaque élément du haut vers le bas et vers la droite et placer la flèche au niveau de l'info-bulle pour qu'elle ressemble à l'élément.

 .tooltipL: before border-color: transparent transparent transparent # 333333; / * Flèche vers la droite * / top: 5px; à droite: -20px;  .tooltipB: before border-color: transparent transparent # 333333 transparent; / * Flèche vers le haut * / droite: 5px; en haut: -20px;  .tooltipR: before border-color: transparent # 333333 transparent transparent; / * Flèche vers la gauche * / haut: 5px; à gauche: -20px;  .tooltipT: before border-color: # 333333 transparent transparent transparent; / * Flèche vers le bas * / droite: 5px; en bas: -20px;

Une fois que vous avez terminé, vous avez terminé et le résultat final devrait ressembler à l'image ci-dessous. Si cela ne ressemble pas à l'image, revenez s'il vous plaît et vérifiez votre code? vous avez peut-être manqué quelque chose? probablement quelque chose de petit.

Pour que le vôtre ressemble exactement à tut, nous devons utiliser tut.css et ce code devrait ressembler à ceci?

 body background: url (images / maintenance / bg.png) repeat-x # 252C2E; a color: # FFE25F; a: hover color: # CFE25F; img border: none; li.tip, li.tipClick margin-right: 30px; marge gauche: 30px; display: inline; .tip> a, .tipClick> a taille de police: 18px; h2 color: # d2d2d2; text-align: center; taille de police: 36px; position: relative; ul> h2 color: # 999; ul marge: 0 auto; position: relative; text-align: centre; haut: 130px; largeur: 960px; li.tip> a, li.tipClick > a color: #CCC; img.ref margin: 0 auto; bloc de visualisation;

Terminé!

Félicitations! Vous avez maintenant terminé de créer des infobulles vraiment impressionnantes sans utiliser une couche de javascript, sauf pour que IE 7 et 8 se comportent bien. J'espère sincèrement que vous avez apprécié ce tutoriel et que vous avez pu apprendre quelque chose de précieux.

Rappelez-vous, soyez patient et continuez à assimiler le plus de connaissances possible et avant de vous en rendre compte, vous serez un maître dans tout ce que vous ferez.!

Création de sites web