Il existe de nombreux tutoriels en ligne sur l’idée des info-bulles basées sur CSS. Pourtant, de nombreux exemples nécessitent des éléments HTML avec le lien d'ancrage. Les visiteurs peuvent obtenir un message d’info-bulle de base en utilisant l’attribut title par défaut. J'aimerais suivre cette méthode et mettre à jour le processus juste un peu.
Dans ce tutoriel, je veux montrer comment créer des info-bulles CSS3 basées sur un attribut HTML5, en fonction du contexte. En utilisant différentes classes, nous pouvons incorporer des jeux de couleurs uniques ainsi que des effets de transition CSS3. Cette technique ne nécessite aucun code HTML supplémentaire, sauf si vous associez les info-bulles à un élément différent (comme un champ de texte). Commençons!
Live Demo - Télécharger le code source
Commencer
La page elle-même est assez ennuyeuse, je souhaite donc me concentrer principalement sur le code CSS. Chaque lien d'ancrage reçoit une info-bulle basée sur la classe .tooltip. À l'aide de la syntaxe de données HTML5, je tire le texte d'un attribut nommé outil de données.
Il vaut mieux éviter le Titre attribut puisque cela affichera une autre info-bulle basée sur un navigateur en plus du CSS. Nous pouvons changer la direction de chaque info-bulle avec des classes supplémentaires sur le lien d'ancrage. Une autre classe .animer appliquera également les transitions à cet effet.
Mon idée originale est née de ce tutoriel qui utilise un bloc de code en cluster plus important. Malheureusement, l'auteur suggère d'utiliser le texte alt pour le titre de l'info-bulle, mais il est interdit de placer alt sur les liens d'ancrage. J'ai donc réorganisé les astuces et mis à jour le code de nettoyage HTML5 / CSS3.
Construire l'info-bulle
Le meilleur endroit pour commencer consiste à examiner le code générique avant que quoi que ce soit n'apparaisse sur la page. Les liens d'ancrage peuvent utiliser :après et :avant pseudo-éléments à appliquer à l'aide de CSS. Cela permet aux développeurs de personnaliser un peu de contenu avant et après tout élément applicable. Dans ce cas, je vais créer une info-bulle triangle avec une boîte à bulles séparée.
Le lien d’ancrage est lui-même positionné de manière à ce que les pseudo-éléments puissent être appliqués en utilisant le positionnement absolu. Cela facilite l'ajustement de la bulle et du triangle dans une info-bulle. visibilité: caché gardera le pourboire hors de la vue de l'utilisateur jusqu'à ce qu'il survole un lien. Sinon, l'info-bulle peut être survolée mais reste opaque à 0%.
Vous remarquerez que le fond par défaut utilise un translucide rgba () réglage. : before contient le code du triangle while: after contient la bulle d’info-bulle et le texte avec la propriété contenu: attr (outil de données).
Vous remarquerez au bas de mon exemple de code que nous mettons à jour la position chaque fois qu'un utilisateur survole le lien d'ancrage. Cette position changera pour chaque emplacement d’info-bulle distinct avec les styles de bordure pour la flèche.
Classes de position
Vous pouvez appliquer une classe supplémentaire sur le lien d'ancrage pour forcer l'emplacement d'une info-bulle donnée. La valeur par défaut apparaît en haut du texte et les autres classes sont .droite, .la gauche, et .bas.
La position inférieure utilise des pixels avec la position supérieure par défaut. Mais je voulais aussi montrer comment appliquer des styles en utilisant des pourcentages dans les info-bulles gauche / droite.Il est préférable de conserver une unité similaire au texte de votre paragraphe afin que tout reste proportionnel.
Les pourcentages sont souvent nécessaires pour le positionnement horizontal car nous ne connaissons pas toujours la largeur en pixels d'un lien. Les em évolutifs sont un autre choix lorsque vous utilisez des polices, mais le positionnement peut s'avérer délicat.
Les seuls autres changements en dehors de la position sont les largeurs de bordure et les couleurs. Ceci est appliqué sur le :avant élément parce qu'il cible chaque triangle. La position détermine l'apparence du triangle et le côté de la bulle sur lequel elle doit apparaître.
Styles CSS supplémentaires
Les deux extraits de classe supplémentaires permettent de recolorer les info-bulles et d’utiliser des effets animés sur l’affichage.
Les codes de classe de couleur sont très simples mais aussi denses et répétitifs. Ce bloc de code correspond à une palette de bleu unique. L'info-bulle :après le sélecteur n’est nécessaire qu’une fois pour mettre à jour l’arrière-plan de la bulle. Nous avons besoin de 4 sélecteurs ciblant chaque flèche par rapport aux 4 positions de l'info-bulle.
Les couleurs doivent être appliquées sur différentes bordures pour différentes positions de triangle. Heureusement, il est très simple de copier / coller et de mettre à jour votre propre jeu de couleurs.
Puisque la bulle d’infos et le triangle peuvent être animés ensemble, j’ai écrit un sélecteur pour les deux. Ils utilisent le même style d'animation pour que tout reste fluide. Tout ce que vous avez à faire est d’ajouter le .animer classe sur n'importe quel lien d'ancrage d'info-bulle.
Attacher à d'autres éléments
La dernière partie de ce didacticiel explique comment utiliser ces info-bulles pour les éléments qui ne possèdent pas de pseudo-support avant / après. Le sélecteur de fratrie adjacent est important par rapport à l'info-bulle - n'hésitez pas à modifier ce code si vous devez cibler des éléments plus spécifiques.
Vous remarquerez que la plupart des propriétés se ressemblent beaucoup. Nous continuons à extraire le contenu de data-tool et les astuces n'apparaissent que lorsqu'un utilisateur se concentre sur un champ de saisie. le .fieldtip La classe peut être ajoutée sur n'importe quel élément. J'ai choisi une étendue comme vous le verrez dans mon code HTML:
Également avec ces info-bulles externes, j'ai gardé les propriétés d'animation attachées. Vous pouvez essayer de changer les choses avec une couleur, une taille de police ou un nombre quelconque de propriétés CSS supplémentaires.
Live Demo - Télécharger le code source
Fermeture
Je pense que ces info-bulles fournissent un excellent modèle de départ pour la personnalisation. Vous pouvez supprimer ou modifier n'importe quelle propriété pour obtenir différentes couleurs d'arrière-plan, styles d'animation ou triangles basés sur des images. Gardez à l'esprit que les effets animés ainsi que les triangles CSS peuvent apparaître bogués dans les anciens navigateurs. Essayez de télécharger une copie de mon code et voyez ce que vous pouvez créer pour vos propres projets.