Share
Nous avons récemment publié un didacticiel expliquant comment créer des info-bulles CSS3 sans script? Aujourd'hui, nous publions une version optimisée pour le SEO, optimisée pour les scripts, qui utilise un peu de magie jQuery pour l'animer à la position de la souris.!
Les info-bulles sont utilisées pour afficher des informations supplémentaires lorsqu'un lien survole. Lorsque nous créons des liens sur notre site Web, il est toujours recommandé d’ajouter des titres aux liens dans l’intérêt du référencement. Ces titres sont affichés lorsque vous survolez un lien, mais il n’ya aucune marque ou style personnalisé. Dans ce tutoriel, je vais vous guider à travers le processus de:
De cette façon, nous améliorerons l'expérience utilisateur tout en conservant un aspect net pour les moteurs de recherche et les avantages du référencement..
Commençons par ajouter d'abord le balisage à l'intérieur du tête de notre document. Nous avons ajouté deux feuilles de style:
"style.css" et "tooltips.css". Vous pouvez supprimer ce dernier lorsque vous souhaitez implémenter votre propre travail, mais nous l'utiliserons dans la démo. La feuille de style
"style.css" contient tous les styles CSS qui vont formater nos info-bulles. Nous avons également ajouté la référence de la bibliothèque Javascript JQuery. Maintenant, voici notre balise de tête de document.
Lien info-bulles avec CSS3 et JQuery
Nous devons maintenant ajouter le balisage pour les liens avec les info-bulles. Dans mon approche pour faire des liens pour afficher des info-bulles, nous devons ajouter un lien avec l'attribut de classe
"tooltip_link". Cela va styler l'info-bulle de base et nous ajouterons un nom de classe supplémentaire, soit
"la gauche", "centre" ou "droite" pour spécifier la position de la flèche de l'info-bulle alignée en bas à gauche, au centre ou à droite, respectivement. Enfin, nous ajoutons quelques titres aux liens à afficher. Maintenant, voici le balisage des liens.
Infobulle à gauche Infobulle Infobulle à droite
Nous devons maintenant déterminer comment sera le balisage de la bulle d'aide afin de pouvoir baser nos styles et notre codage. Nous allons utiliser une base
"div" balise avec attribut de classe de "infobulle" et un de ces noms de classe
"la gauche", "centre" ou "droite". À l'intérieur, nous placerons le texte de l'info-bulle. Maintenant, voici le balisage infobulle.
Du texte dans l'info-bulle
Tout d’abord, nous commençons par nommer le lien lui-même en définissant sa position sur "relatif" afin que nous puissions positionner l'info-bulle par rapport au lien.
a.tooltip_link position: relative! important;
Maintenant, nous devons ajouter le style CSS pour l'info-bulle de base dont nous allons utiliser le nom de classe
"infobulle". Nous devons masquer l'info-bulle pour pouvoir l'afficher à l'aide de JQuery lorsque le lien est survolé, définissez la position sur
"absolu" afin que nous puissions définir la position par rapport au lien lui-même, définissez la largeur sur
200px, une 5px rembourrage, une marge inférieure de
12px pour faire un espace pour la flèche, définissez la couleur du texte sur blanc, z-index à
100 être au top de tout le contenu, 100% à partir du bas, définissez la couleur d'arrière-plan sur
transparent couleur bleue avec quelques styles de police et de texte.
N'oubliez pas que vous pouvez modifier le style en fonction de vos souhaits, la démo utilisera des styles visuels intentionnellement simples dans un souci de simplicité..
.infobulle display: none; position: absolue! important; largeur: 200px; arrière-plan: rgba (61, 102, 143,0,9); rembourrage: 5px; marge: 0 0 12px 0; couleur: #fff; z-index: 100; en bas: 100%; text-align: center; poids de police: gras; taille de police: 11px;
Ajoutons le style général de la flèche d'info-bulle en utilisant des éléments puesdo
"après" et "avant". Nous appelons le "après" élément puesdo qui formera la flèche entière de gauche et de droite et la moitié de la flèche dans l'info-bulle centrale en le définissant sans contenu, en position absolue, définissant la couleur de la bordure de la même manière que celle utilisée pour l'arrière-plan de l'infobulle avec la largeur complète et
"-14px" à partir du bas de l'info-bulle. le "avant" L'élément puesdo a presque le même style que le
"après" élément puesdo.
.info-bulle: après contenu: ""; position: absolue! important; en bas: -14px; z-index: 100; bordure: 0 rgba solide (61, 102, 143,0,9); bord inférieur: transparent 14px; largeur: 100%; .tooltip: before content: ""; position: absolue! important; bordure: 0 rgba solide (61, 102, 143,0,9); en bas: -14px; z-index: 100;
Pour styler l'info-bulle avec la flèche gauche, nous utilisons "la gauche" classe nous appelons la classe avec un rayon de bordure de tous les coins sauf celui en bas à gauche, puis nous appelons la bordure gauche et la position de l'extrême gauche pour l'élément puesdo "après". Pour la flèche droite, il suffit de changer le rayon de la bordure, de définir le bord droit et de le positionner à partir de la droite. L'info-bulle de la flèche centrale indique le rayon de la bordure à tous les coins. Nous devons maintenant définir le style
"après" et "avant" éléments de puesdo. le
"après" L'élément puesdo a une bordure gauche avec 50% de la largeur et
50% de gauche, le "avant" L'élément puesdo a une bordure droite et une bordure inférieure transparente, avec
50% de la largeur et 50% de la droite.
.tooltip.left border-radius: 5px 5px 5px 0; .tooltip.left: after border-left-width: 14px; gauche: 0; .tooltip.right border-radius: 5px 5px 0 5px; .tooltip.right: after border-right-width: 14px; à droite: 0; .tooltip.center border-radius: 5px; .tooltip.center: after border-left-width: 10px; largeur: 50%; à gauche: 50%; .tooltip.center: before border-right-width: 10px; bord inférieur: transparent 14px; largeur: 50%; à droite: 50%;
Afin d'obtenir les fonctionnalités souhaitées, nous devons ajouter notre code JQuery dans une balise de script avant la balise de fermeture. Nous utiliserons des événements de souris pour déterminer la fonctionnalité que nous souhaitons créer..
le "mouseenter" L’événement se déclenche lorsque le curseur de la souris entre dans n’importe quelle partie de l’élément en question qui est dans ce cas la
"une" ou élément de lien, cela ne fonctionnera que lorsque le lien a plus de zéro caractère dans l'attribut title. Ici, nous devons faire ce qui suit:
Accentsconagua
$ ("a"). mouseenter (function (e) // événement déclenché lorsque le curseur de la souris entre "un" élément var $ nom_classe = $ (this) .attr ("classe"). slice (13); // get Attribut de classe de l'élément "a" après avoir laissé 13 caractères, ce qui correspond à "tooltip_link" var $ x = e.pageX - this.offsetLeft; // obtenir la coordonnée X de la souris relative à l'élément "a" var $ tooltip_text = $ (this) .attr ("title"); // récupère l'attribut title de l'élément "a" if ($ tooltip_text.length> 0) // n'affiche l'info-bulle que s'il comporte plus de zéro caractères $ (this) .append (''+ $ tooltip_text +''); // ajoute un balisage d'info-bulle, insère le nom de la classe et le titre de l'info-bulle à partir des valeurs supérieures à $ ("a> div.tooltip.center"). css ("left", "" + $ x - 103 + "px"); // définit la position de l'info-bulle à partir de la gauche $ ("a> div.tooltip.left"). css ("gauche", "" + $ x + "px"); // définit la position de l'info-bulle à partir de la gauche $ ("a> div.tooltip.right"). css ("gauche", "" + $ x - 208 + "px"); // définit la position de l'info-bulle à partir de la gauche $ ("a> div.tooltip." + $ nom_classe) .fadeIn (300); // affiche, anime et fade l'info-bulle); le "mouseleave" événement se déclenche lorsque le curseur de la souris quitte le
"une" ou élément de lien. Dans cet attribut, nous allons simplement inverser tout ce que nous avons fait dans
"mouseenter" un événement. Nous obtiendrons la partie attribut name de la classe à partir du lien, puis nous effacerons l’info-bulle qui définira la propriété display sur
"aucun" et utiliser la durée d'animation de 300ms, alors nous devrons retarder les prochaines fonctions pour
300ms jusqu'à la fin de l'animation de fondu. Maintenant, pour supprimer le balisage d’info-bulle, nous devons le placer dans une file d’attente personnalisée, puis terminer celle-ci à l’aide de
"dequeue" fonction qui permet à la file d'attente principale de continuer.
$ ("a"). mouseleave (function () // événement déclenché lorsque le curseur de la souris laisse "un" élément var $ nom_classe = $ (this) .attr ("class"). slice (13); // get class attribut de l'élément "a" après avoir laissé 13 caractères, ce qui équivaut à "tooltip_link" // effacer l'info-bulle, attendre 300 ms, puis supprimer l'info-bulle et mettre fin à la file d'attente personnalisée $ ("a> div.tooltip." + $ class_name ) .fadeOut (300) .delay (300) .queue (function () $ (this) .remove (); $ (this) .dequeue (););); Votre résultat final devrait maintenant ressembler à l'image ci-dessous. Pour que votre résultat final ressemble exactement à notre démo, vous devez utiliser les styles à l'intérieur
"tut.css", mais n'hésitez pas à ajouter vos propres ajustements.
J'espère que vous avez tous appris certaines techniques de nos tutoriels CSS et JQuery! Partagez vos pensées ci-dessous :)
