Share
Les info-bulles sont un excellent moyen d'améliorer une interface utilisateur lorsque vos utilisateurs ont besoin d'un contexte supplémentaire pour cette icône fantaisie, ou lorsqu'ils veulent être rassurés de cliquer sur un bouton, ou peut-être une légende d'un œuf de Pâques pour accompagner une image. Faisons maintenant des info-bulles animées, avec rien que du HTML et du CSS.
Voici ce à quoi nous travaillons:
Avant de nous immerger dans le chaudron, jetons un coup d'œil à ce que nous préparons. L’objectif principal est d’avoir un moyen simple d’ajouter une info-bulle, nous le ferons donc en ajoutant une infobulle attribut:
Accentsconagua
texte ou icône visible, etc..Si vous recherchez des info-bulles conformes à la norme 508 ou avez besoin d'infobulles plus intelligentes avec détection de collision entre conteneurs et / ou prise en charge du contenu HTML par rapport au texte brut, de nombreuses solutions utilisent des scripts tiers pour répondre à vos besoins..
«JavaScript est impératif pour créer des composants interactifs entièrement accessibles.» - Sara Soueidan, Construire une info-bulle d'aide entièrement accessible… est plus difficile que je ne le pensais
Ce tutoriel ne traite pas spécifiquement des besoins d'accessibilité. Vous connaissez vos utilisateurs et ce dont ils ont besoin. Assurez-vous également de prendre en compte leurs besoins à cet égard..
Oh, attendez. Nous avons d'abord un astérisque à traiter, à propos de «ne pas avoir besoin de balisage supplémentaire». C'est magique, après tout. Nos infobulles ne le font pas vraiment besoin d’éléments DOM supplémentaires car ils sont complètement composés de pseudo-éléments (les ::avant et ::après des choses) que nous pouvons contrôler via CSS.
Si vous utilisez déjà les pseudo-éléments d'un élément provenant d'un autre ensemble de styles et que vous souhaitez une info-bulle sur cet élément, vous devrez peut-être restructurer un élément. peu bit.
Attendre. Gremlins! Encore une mise en garde: Positionnement CSS. Pour que les info-bulles fonctionnent correctement, leur élément parent (l'élément auquel nous attachons l'info-bulle) doit être
position: relative, ouposition: absolue, ouposition: fixeFondamentalement, autre chose que position: statique - c'est le mode de position par défaut attribué à peu près à tous les éléments par le navigateur. Les info-bulles sont positionnées de manière absolue et ils ont donc besoin de connaître les limites dans lesquelles leur caractère absolu a un sens. La directive de position par défaut statique ne déclare pas ses propres limites et ne donnera pas à nos info-bulles un contexte dans lequel pousser, alors les info-bulles utiliseront le prochain élément parental le plus proche qui possède une frontière déclarée.
Vous devrez décider quelle directive de position correspond le mieux à la façon dont vous utilisez les info-bulles. Ce tutoriel suppose position: relative pour l'élément parent. Si votre interface utilisateur repose sur un élément positionné de manière absolue, une restructuration (majoration supplémentaire) peut également être nécessaire pour déployer une info-bulle sur cet élément..
Sautons et voyons ce qui se passe.
La plupart des règles CSS sont écrites avec des noms de classe à l’esprit, comme .cette chose, mais CSS a une poignée de types de sélecteur. Nos infobulles magiques vont utiliser des sélecteurs d'attributs - c'est la notation entre crochets:
[foo] background: rgba (0, 0, 0, 0.8); couleur: #fff;
Lorsque le navigateur rencontre quelque chose comme ceci:
Vérifiez-le!il saura qu'il doit appliquer le [foo] règles parce que la balise a un attribut nommé foo. Dans ce cas, la plage elle-même aurait un fond noir translucide avec du texte blanc.
Les éléments HTML ont divers attributs intégrés, mais nous pouvons aussi créer les nôtres. Comme foo, ou infobulle. Par défaut, HTML ne sait pas ce que cela signifie, mais avec CSS, nous pouvons dire à HTML ce que cela signifie..
Nous utiliserons principalement les sélecteurs d'attributs pour séparer les préoccupations. L'utilisation d'attributs sur les noms de classe ne nous procure aucun point de bonus dans les guerres de spécificité; les classes et les attributs ont la même spécificité. Cependant, en utilisant des attributs, nous pouvons conserver notre contenu avec le contenu car les attributs HTML peuvent avoir des valeurs, alors que les noms de classe ne le sont pas..
Considérons le nom de la classe .infobulle vs l'attribut [info-bulle] dans cet exemple de code. Le nom de classe est une des valeurs pour l'attribut [classe] tandis que l'attribut tooltip a une valeur, qui est le texte que nous voulons afficher.
lorem ipsum lorem ipsum
Nos infobulles utiliseront deux attributs différents:
infobulle: cela contient le contenu de l'info-bulle (une chaîne de texte brut)couler: optionnel; Cela nous permet de contrôler comment exposer l'info-bulle. Nous pouvons prendre en charge de nombreux emplacements, mais nous couvrirons quatre emplacements courants:Maintenant, mettons en place le travail de base pour toutes les info-bulles. Les règles des étapes 1 à 5 s’appliquent à toutes les info-bulles, quel que soit le cas. couler nous leur donnons. Les étapes 6 et 7 présentent des distinctions entre les différentes couler valeurs.
Ceci est pour l'élément parent de l'info-bulle. Attribuons une directive de position afin que le positionnement absolu des parties de l’info-bulle (le ::avant et ::après pseudo-éléments) sont positionnés dans le contexte de cet élément parent et non dans le contexte de la page dans son ensemble ou d'un élément de grands-parents ou d'un autre élément externe dans l'arbre DOM.
[info-bulle] position: relative;
Il est temps d'amorcer les pseudo-éléments. Ici, nous allons définir des propriétés communes à la fois ::avant et ::après pièces. le contenu la propriété est ce qui fait réellement fonctionner un pseudo-élément, mais nous y arriverons bientôt.
[tooltip] :: before, [tooltip] :: after line-height: 1; sélection de l'utilisateur: aucune; événements de pointeur: aucun; position: absolue; affichage: aucun; opacité: 0; / * opinions * / text-transform: none; taille de police: .9em;
Je ne sais pas pourquoi "dink" est logique, je l'ai toujours appelé ça. C’est la petite partie pointue en triangle qui donne aux info-bulles leur bulle ressentez en pointant sur la chose qui l’invoque. Remarquez que nous utilisons transparent pour la couleur de la bordure; nous ajouterons plus tard la couleur car la façon dont nous l'ajoutons dépend de l'info-bulle couler.
[tooltip] :: before content: "; z-index: 1001; border: 5px solid transparent;
Ce n'est pas une faute de frappe que le contenu:"; déclaration a une chaîne vide pour une valeur. Nous ne voulons rien, mais nous avons besoin de cette propriété pour que le pseudo-élément existe.
Pour faire un triangle, nous définissons une bordure solide avec une certaine épaisseur sur une boîte vide (sans contenu), sans largeur ni hauteur, et en donnant à un seul côté de la boîte une couleur de bordure. Pour plus de détails, consultez le tutoriel suivant:
Voici la viande de la chose. Remarquez le contenu: attr (tooltip) partie disant, "Ce pseudo-élément devrait utiliser la valeur de la infobulle attribuer en tant que contenu. "C’est pourquoi l’utilisation d’attributs plutôt que de noms de classe!
[tooltip] :: after content: attr (info-bulle); /* la magie! * / z-index: 1000; / * La majeure partie du reste est de l'opinion * / font-family: Helvetica, sans-serif; text-align: center; / * Laisse le contenu définir la taille des info-bulles, mais cela les empêchera également de devenir odieux * / min-width: 3em; largeur maximale: 21em; espace blanc: maintenant; débordement caché; débordement de texte: points de suspension; / * design visible des bulles d'info-bulle * / remplissage: 1ch 1.5ch; border-radius: .3ch; boîte-ombre: 0 1em 2em -.5em rgba (0, 0, 0, 0,35); arrière-plan: # 333; couleur: #fff;
Remarquez le z-index valeurs pour le dink et la bulle. Ce sont des valeurs arbitraires, mais gardez à l'esprit qu'un z-index la valeur est relative. Signification: une valeur d'index z de 1001 dans un élément d'indice z de 3 signifie simplement que l'élément 1001 sera l'élément le plus haut. à l'intérieur cette z-index: 3 récipient.
La bulle z-index devrait être au moins un échelon de la dink z-index. Si elle est égale ou supérieure à la valeur, vous pouvez vous retrouver avec un effet de coloration incohérent sur la valeur si vos info-bulles utilisent un boîte ombre.
Pour un aperçu plus détaillé de la propriété z-index, consultez le didacticiel suivant:
Pour activer nos infobulles, passez la souris sur l'élément avec l'info-bulle… Presque.
[info-bulle]: hover :: before, [info-bulle]: hover :: after display: block;
Si vous regardez notre bloc de style à l’étape 2, vous verrez que nous avons utilisé opacité: 0; de même que affichage: aucun; pour nos pièces d'info-bulle. Nous avons fait cela pour pouvoir utiliser les effets d'animation CSS lorsque les info-bulles s'affichent et se masquent..
le afficher la propriété ne peut pas être animée, mais opacité pouvez! Nous allons nous occuper des animations en dernier. Si vous ne vous souciez pas des info-bulles animées, effacez simplement le opacité: 0; déclaration de l'étape 2 et ignorer l'animation de l'étape 7.
La dernière chose dont nous avons besoin et qui s'applique toujours à toutes les info-bulles est un moyen de supprimer une info-bulle si elle n'a pas de contenu. Si vous remplissez les info-bulles avec une sorte de système dynamique (Vue.js, Angular ou React, PHP, etc.), nous ne voulons pas de bulles vides stupides!
/ * ne pas afficher les info-bulles vides * / [tooltip = "] :: before, [tooltip ="] :: after display: none! important;
Cette étape peut devenir assez compliquée car nous allons utiliser des sélecteurs peu communs pour aider nos info-bulles à gérer leurs emplacements en fonction de leur couler valeurs (ou absence de valeurs).
"Des choses étranges se préparent au Circle-K." - Ted Theodore Logan
Avant de nous lancer dans les styles, examinons quelques modèles de sélecteur que nous allons utiliser.
[info-bulle]: pas ([flux]) :: avant, [info-bulle] [flux ^ = "up"] :: avant / *… propriétés: valeurs… * /
Ceci indique au navigateur: «Pour tous les éléments avec un infobulle attribuer que soit ne pas avoir un couler attribuer, ou avoir un couler avec une valeur qui commence avec 'up': applique ces styles à ses ::avant pseudo-élément. "
Nous utilisons un modèle ici afin que ceux-ci puissent être étendus à d'autres flux sans avoir à répéter autant de CSS. Ce modèle flux ^ = "up" utilise le ^ = (commence par) Matcher. Cela permet aux styles de s’appliquer également à droit et en haut à gauche Si vous souhaitez ajouter ces contrôles de flux. Nous n'allons pas les couvrir ici, mais vous pouvez les voir en cours d'utilisation sur ma démonstration d'info-bulle d'origine sur CodePen.
Voici les blocs CSS pour les quatre flux traités dans ce didacticiel..
/ * UNIQUEMENT le :: before * / [tooltip]: not ([flow]) :: before, [tooltip] [flow ^ = "up"] :: before bottom: 100%; border-bottom-width: 0; border-top-color: # 333; / * UNIQUEMENT le :: after * / [tooltip]: not ([flow]) :: after, [tooltip] [flow ^ = "up"] :: after bottom: calc (100% + 5px); / * Both :: before & :: after * / [tooltip]: not ([flow]) :: before, [tooltip]: pas ([flow]) :: after, [tooltip] [flow ^ = "up "] :: before, [tooltip] [flow ^ =" up "] :: after left: 50%; transformer: traduire (-50%, -.5em);
[tooltip] [flow ^ = "down"] :: before top: 100%; border-top-width: 0; couleur de bordure inférieure: # 333; [tooltip] [flow ^ = "down"] :: after top: calc (100% + 5 pixels); [tooltip] [flow ^ = "down"] :: avant, [tooltip] [flow ^ = "down"] :: after left: 50%; transformer: traduire (-50%, .5em);
[tooltip] [flow ^ = "left"] :: before top: 50%; border-right-width: 0; border-left-color: # 333; à gauche: calc (0e - 5px); transformer: traduire (-. 5em, -50%); [tooltip] [flow ^ = "left"] :: after top: 50%; à droite: calc (100% + 5px); transformer: traduire (-. 5em, -50%);
[tooltip] [flow ^ = "right"] :: before top: 50%; border-left-width: 0; border-right-color: # 333; à droite: calc (0em - 5px); transformer: traduire (.5em, -50%); [tooltip] [flow ^ = "right"] :: after top: 50%; à gauche: calc (100% + 5px); transformer: traduire (.5em, -50%);
Les animations sont incroyables. Les animations peuvent:
Nos infobulles entreront dans cette dernière description. Plutôt que de créer une bulle de texte et de la faire apparaître en un éclair, faisons-les plus doux.
Nous aurons besoin de deux @ keyframe animations. Les info-bulles haut / bas utiliseront le infobulles-vert clé, et les info-bulles gauche / droite utiliseront le infobulles-horz image clé. Notez que dans ces deux images clés, nous définissons uniquement l'état final souhaité pour les info-bulles. On n'a pas besoin de savoir d'où ils viennent de (les infobulles elles-mêmes ont cette information de style). Nous voulons juste contrôler où ils vont à.
@keyframes tooltips-vert to opacity: .9; transformer: traduire (-50%, 0); @keyframes tooltips-horz to opacity: .9; transformer: traduire (0, -50%);
Maintenant, nous devons appliquer ces images clés aux info-bulles lorsqu'un utilisateur survole les éléments déclencheurs (les éléments avec le [info-bulle] les attributs). Puisque nous utilisons divers flux pour contrôler la façon dont les info-bulles s'afficheront, nous devons identifier ces possibilités dans les styles..
[tooltip]: not ([flux]): hover :: before, [tooltip]: non ([flux]): hover :: after, [tooltip] [flux ^ = "up"]: hover :: before, [ tooltip] [flow ^ = "up"]: hover :: after, [tooltip] [flow ^ = "down"]: hover :: before, [tooltip] [flow ^ = "down"]: hover :: after animation: infobulles-vert 300 ms easy-out forward; [tooltip] [flow ^ = "left"]: hover :: before, [tooltip] [flow ^ = "left"]: hover :: after, [tooltip] [flow ^ = "right"]: hover :: avant, [tooltip] [flow ^ = "right"]: hover :: after animation: tooltips-horz 300 ms de détente en avant;
Rappelez-vous que nous ne pouvons pas animer le afficher propriété, mais nous pouvons donner aux info-bulles un effet de fondu en manipulant le opacité. Nous animons également la propriété de transformation qui donne aux info-bulles un mouvement subtil, comme si elles volaient pour pointer sur leurs éléments déclencheurs..
Remarquez le avant mot clé dans la déclaration d'animation. Cela indique à l'animation de ne pas réinitialiser une fois qu'elle est terminée, mais d'avancer et de rester à la fin..
Travail fantastique! Nous avons beaucoup couvert dans ce tutoriel et avons maintenant une collection soignée d’infobulles à montrer pour notre travail acharné:
Nous n'avons fait qu'effleurer la surface de ce qui peut être fait avec les info-bulles CSS. Amusez-vous à jouer avec eux et continuez à expérimenter et à concocter vos propres recettes.!
