{"id":251383,"date":"2022-12-23T11:14:00","date_gmt":"2022-12-23T08:14:00","guid":{"rendered":"https:\/\/inform.click\/creation-dune-info-bulle-a-laide-de-css\/"},"modified":"2022-12-23T12:08:00","modified_gmt":"2022-12-23T09:08:00","slug":"creation-dune-info-bulle-a-laide-de-css","status":"publish","type":"post","link":"https:\/\/inform.click\/fr\/creation-dune-info-bulle-a-laide-de-css\/","title":{"rendered":"Cr\u00e9ation d’une info-bulle \u00e0 l’aide de CSS"},"content":{"rendered":"

\n Vous savez probablement d\u00e9j\u00e0 ce qu’est une info-bulle.\n<\/p>\n

\n Une info-bulle est une ic\u00f4ne ou un texte qui, lorsqu’il est survol\u00e9, nous donne plus d’informations dans une bulle ou une fen\u00eatre contextuelle.\n<\/p>\n

\n Vous trouverez normalement des info-bulles dans les formulaires, mais vous pouvez les placer l\u00e0 o\u00f9 les utilisateurs ont besoin de plus d’informations.\n<\/p>\n

\n Dans l’image ci-dessus, le cercle contenant le point d’interrogation affiche une info-bulle<\/strong>. Au survol, cette info-bulle donne plus d’informations sur les types de caract\u00e8res que votre mot de passe doit inclure.\n<\/p>\n

\n Vous pouvez obtenir des frameworks pour impl\u00e9menter des info-bulles sur votre site Web, mais la plupart du temps, ces frameworks utilisent JavaScript pour y parvenir.\n<\/p>\n

\n Dans cet article, nous allons apprendre \u00e0 cr\u00e9er des info-bulles en utilisant uniquement CSS<\/strong> de mani\u00e8re relativement simple.\n<\/p>\n

\n Avant de commencer, le fichier HTML et CSS final pour la mise en \u0153uvre de l’info-bulle est disponible \u00e0 la fin de ce blog<\/strong>. Nous avons d\u00e9crit en d\u00e9tail chaque \u00e9l\u00e9ment utilis\u00e9 en HTML et CSS pour impl\u00e9menter l’info-bulle de la mani\u00e8re la plus simple possible.\n<\/p>\n

\n Vous pourrez impl\u00e9menter la fonctionnalit\u00e9 d’info-bulle sur n’importe quel site Web en utilisant uniquement HTML et CSS, apr\u00e8s avoir compl\u00e8tement parcouru cet article.\n<\/p>\n

\n Alors commen\u00e7ons\u2026\n<\/p>\n

\n Nous allons commencer par cr\u00e9er une simple page HTML demandant un mot de passe.\n<\/p>\n

\n \u00c9tape 1 : Cr\u00e9ation d’une page HTML simple pour afficher l’info-bulle
\n<\/h5>\n

\n Voici le code HTML de base pour la page de formulaire<\/strong> ,\n<\/p>\n

\n\n\n<\/code><\/pre>\n
<\/p>\n
\n<\/pre>\n
<br \/>\n  Awesome CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<p>\n  <code>Comme vous pouvez le voir, nous avons li\u00e9 notre fichier \u00ab<strong>\u00a0style.css<\/strong>\u00a0\u00bb dans le code HTML ci-dessus.<\/code>\n<\/p>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<p>\n  <code>Nous allons cr\u00e9er l'info-bulle \u00e0 l'aide de ce fichier CSS.<\/code>\n<\/p>\n<p>\n  <code>Nous utilisons un <strong>formulaire simple<\/strong> pour essayer la fonction d'info-bulle. Ce formulaire ne comporte qu'un seul champ intitul\u00e9 \" <strong>Mot de passe<\/strong> \", car nous l'utilisons uniquement pour illustrer le fonctionnement des info-bulles.<\/code>\n<\/p>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> <\/pre>\n<p>\n  <code>Nous avons utilis\u00e9 la classe \u00ab<strong>\u00a0info-bulle<\/strong>\u00bb pour impl\u00e9menter la fonctionnalit\u00e9 d'info-bulle \u00e0 l'aide de CSS. Nous en discuterons dans la section suivante.<\/code>\n<\/p>\n<h5>\n  <code>\u00c9tape 2: Styles CSS de base pour notre page HTML<\/code><br \/>\n<\/h5>\n<p>\n  <code>Avant de cr\u00e9er le CSS pour \u00abtooltip \u00bb, nous devons cr\u00e9er quelques <strong>styles CSS de base pour notre page html<\/strong>.<\/code>\n<\/p>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}<\/code><\/code><\/pre>\n<p>\n  Cela donnera une page html avec un joli fond vert. Nous avons \u00e9galement s\u00e9lectionn\u00e9 la police verdana et la couleur de police en blanc.\n<\/p>\n<pre><code>form{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}<\/code><\/pre>\n<p>\n  Nous avons positionn\u00e9 le formulaire \u00ab\u00a0relativement\u00a0\u00bb, avec une largeur maximale de 600 pixels et une marge de 20%.\n<\/p>\n<pre><code>Formlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}<\/code><\/pre>\n<p>\n  La classe d’\u00e9tiquette de formulaire permet de sp\u00e9cifier la taille de la police et l’espacement des lettres pour le texte de l’\u00e9tiquette que nous utiliserons.\n<\/p>\n<pre><code>forminput{\nmargin: 0 10px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #444;\n}<\/code><\/pre>\n<p>\n  Ici, nous avons les styles pour le champ de formulaire. Il n’y a rien de compliqu\u00e9 dans ce style. Nous avons donn\u00e9 une <strong>marge<\/strong> et <strong>un rembourrage<\/strong> appropri\u00e9s ainsi que la taille et <strong>la couleur<\/strong> <strong>de la police<\/strong> pour les champs de formulaire.\n<\/p>\n<p>\n  Il s’agit donc de nos styles CSS par d\u00e9faut pour notre page de formulaire que nous utiliserons pour montrer comment impl\u00e9menter la fonctionnalit\u00e9 d’info-bulle \u00e0 l’aide de CSS.\n<\/p>\n<h3>\n  Cr\u00e9ons une info-bulle en utilisant CSS<br \/>\n<\/h3>\n<h5>\n  \u00c9tape 4: Style CSS pour l’info-bulle<br \/>\n<\/h5>\n<p>\n  Vous avez peut-\u00eatre remarqu\u00e9 que nous avons utilis\u00e9 la classe \u00ab<strong>tooltip<\/strong>\u00bb dans notre fichier html. C’est le style que nous allons appliquer pour le signe de point d’interrogation (\u00ab\u00a0?\u00a0\u00bb) qui agira comme notre info-bulle.\n<\/p>\n<pre><code>.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}<\/code><\/pre>\n<p>\n  Il faut d’abord positionner l’infobulle relativement en appliquant \u00ab<strong>position: relative ;<\/strong> \u00a0\u00bb style. La raison du positionnement relatif de l’info-bulle est que nous utiliserons <strong>des pseudo-\u00e9l\u00e9ments<\/strong> plus tard dans cette m\u00e9thode qui peuvent \u00eatre positionn\u00e9s \u00ab\u00a0absolument\u00a0\u00bb. Nous voulons donc que ces pseudo classes soient \u00ab\u00a0absolues\u00a0\u00bb positionn\u00e9es relativement \u00e0 cet \u00e9l\u00e9ment.\n<\/p>\n<p>\n  Ensuite, nous donnons une <strong>couleur de fond noire<\/strong> pour l’info-bulle en utilisant la m\u00e9thode rgba(),\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  dans lequel r,g,b signifie rouge, vert et bleu et a signifie ‘ <strong>alpha<\/strong> ‘ qui <strong>contr\u00f4le l’opacit\u00e9<\/strong>.\n<\/p>\n<p>\n  Nous allons donner un fond noir \u00e0 notre cercle d’infobulle et r\u00e9duire son opacit\u00e9 \u00e0 0,3 pour le faire ressembler \u00e0 une <strong>couleur vert fonc\u00e9<\/strong>.\n<\/p>\n<p>\n  Ensuite, nous allons appliquer des styles de base de rembourrage et de rayon de bordure au signe de point d’interrogation (\u00ab\u00a0?\u00a0\u00bb) Pour que notre info-bulle soit belle.\n<\/p>\n<pre><code>padding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;<\/code><\/pre>\n<p>\n  Avec le CSS ci-dessus, nous appliquons un rembourrage au cercle entourant le \u00ab\u00a0?\u00a0\u00bb, Et faisons du border-radius 100 % pour en faire un cercle complet.\n<\/p>\n<p>\n  Font-size d\u00e9termine la taille de \u00ab\u00a0?\u00a0\u00bb sign, que nous utilisons comme info-bulle dans cet exemple.\n<\/p>\n<p>\n  Nous ajoutons \u00e9galement \u00ab<strong>cursor:help ;<\/strong> \u00a0\u00bb dans le CSS, cela donnera un signe de point d’interrogation sous le pointeur de la souris lorsque vous survolez cet \u00e9l\u00e9ment, comme indiqu\u00e9 dans l’image ci-dessous.\n<\/p>\n<p>\n  L’info-bulle contient du contenu (dans cet exemple, nous donnons plus d’informations sur les caract\u00e8res qui doivent \u00eatre inclus dans le champ \u00ab\u00a0mot de passe\u00a0\u00bb).\n<\/p>\n<h5>\n  \u00c9tape 5 : Donnez le contenu de l’info-bulle dans le code HTML<br \/>\n<\/h5>\n<p>\n  Le prochain d\u00e9fi qui nous attend est de savoir o\u00f9 placer ce contenu dans l’info-bulle ?\n<\/p>\n<p>\n  Pour accomplir cette t\u00e2che, nous allons ajouter un <strong>attribut<\/strong> dans le fichier HTML que nous avons cr\u00e9\u00e9 auparavant.\n<\/p>\n<pre><code><span class=\"tooltip\">?<\/span><\/code><\/pre>\n<p>\n  Ici, nous ne voulons pas ajouter de balisage suppl\u00e9mentaire, comme cr\u00e9er une autre \u00e9tendue pour ajouter le contenu \u00e0 l’int\u00e9rieur de l’info-bulle.\n<\/p>\n<p>\n  Nous pouvons inclure le contenu de l’info-bulle dans cet intervalle.\n<\/p>\n<p>\n  Nous allons le faire en ajoutant un attribut \u00ab<strong>data<\/strong> \u00bb. Le nom de l’attribut de donn\u00e9es ici va \u00eatre \u00a0\u00bb <strong>info-bulle<\/strong> \u00ab\u00a0.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"\">?<\/span><\/code><\/pre>\n<p>\n  <strong>data-tooltip<\/strong> est notre attribut de donn\u00e9es \u00e0 l’aide duquel nous ajoutons le contenu qui doit \u00eatre affich\u00e9 dans l’info-bulle.\n<\/p>\n<p>\n  Ensuite, nous allons ajouter les instructions concernant le caract\u00e8re qui doit \u00eatre pr\u00e9sent dans le mot de passe, \u00e0 l’int\u00e9rieur de notre attribut data-tooltip.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  Nous avons maintenant <strong>ajout\u00e9 le texte<\/strong> qui devrait appara\u00eetre dans l’info-bulle. Ensuite, nous allons apprendre \u00e0 <strong>faire appara\u00eetre ce texte dans l’info-bulle<\/strong> lorsque les utilisateurs survolent le point d’interrogation.\n<\/p>\n<h5>\n  \u00c9tape 6 : Cr\u00e9ation d’un conteneur d’info-bulles \u00e0 l’aide de pseudo-\u00e9l\u00e9ments<br \/>\n<\/h5>\n<p>\n  Tout d’abord, nous devons cr\u00e9er les conteneurs \u00e0 l’int\u00e9rieur desquels le contenu de l’info-bulle doit \u00eatre affich\u00e9.\n<\/p>\n<p>\n  Pour ce faire, revenons au fichier style.css et cr\u00e9ons <strong>des pseudo-\u00e9l\u00e9ments<\/strong> pour la classe <strong>.tooltip<\/strong>.\n<\/p>\n<p>\n  Nous allons cr\u00e9er des pseudo-classes <strong>::after<\/strong> et <strong>::before<\/strong> pour faire appara\u00eetre le contenu de notre infobulle.\n<\/p>\n<p>\n  Fondamentalement, en utilisant une pseudo classe comme \u00a0\u00bb <strong>:: apr\u00e8s<\/strong> \u00ab\u00a0, vous pouvez cibler une position juste apr\u00e8s l’\u00e9l\u00e9ment qui utilise la classe principale et styliser cette position.\n<\/p>\n<p>\n  De m\u00eame, en utilisant la pseudo classe :: avant, vous pouvez styliser la position juste avant l’\u00e9l\u00e9ment o\u00f9 la classe principale est utilis\u00e9e (dans ce cas, \u00ab\u00a0?\u00a0\u00bb est cet \u00e9l\u00e9ment).\n<\/p>\n<p>\n  C’est une pseudo-classe tr\u00e8s utile pour injecter du contenu suppl\u00e9mentaire sur une page.\n<\/p>\n<p>\n  Nous allons cr\u00e9er une pseudo classe pour \u00ab\u00a0tootlip\u00a0\u00bb comme indiqu\u00e9 ci-dessous.\n<\/p>\n<pre><code>.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\n}<\/code><\/pre>\n<p>\n  Nous cr\u00e9ons une classe commune pour les styles ::before et ::after.\n<\/p>\n<p>\n  Ici, nous avons <strong>absolument positionn\u00e9<\/strong> les styles ::before et ::after, car nous voulons qu’ils soient positionn\u00e9s au-dessus du \u00ab\u00a0point d’interrogation\u00a0\u00bb et nous voulons qu’ils soient centr\u00e9s au-dessus de \u00ab\u00a0?\u00a0\u00bb.\n<\/p>\n<p>\n  Pour que l’info-bulle soit centr\u00e9e au-dessus du \u00ab\u00a0?\u00a0\u00bb nous devons utiliser le \u00a0\u00bb <strong>gauche : 50 % ;<\/strong> \u00a0\u00bb attribut.\n<\/p>\n<p>\n  Maintenant, nous allons utiliser :: <strong>before<\/strong> pour styliser le petit triangle en bas de notre info-bulle.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Le <strong>::after<\/strong> est utilis\u00e9 pour styliser le contenu \u00e0 l’int\u00e9rieur de l’info-bulle.\n<\/p>\n<p>\n  Voyons comment c’est fait.\n<\/p>\n<p>\n  Nous allons d’abord cr\u00e9er le petit triangle en bas de l’infobulle.\n<\/p>\n<pre><code>.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}<\/code><\/pre>\n<p>\n  Nous devrions utiliser <strong>le contenu : \u00ab\u00a0\u00a0\u00bb ;<\/strong> attribut pour montrer que cet \u00e9l\u00e9ment n’a pas de contenu. Puisque nous avons inject\u00e9 du <strong>contenu vide<\/strong>, nous pouvons maintenant le styler.\n<\/p>\n<p>\n  Nous pouvons <strong>cr\u00e9er des triangles en CSS<\/strong> en utilisant l’ attribut <strong>border-width<\/strong>.\n<\/p>\n<p>\n  Par cette ligne,\n<\/p>\n<p>\n  <code>border-width: 10px 8px 08px;<\/code>\n<\/p>\n<p>\n  Nous avons sp\u00e9cifi\u00e9 que la largeur de la bordure en haut est de 10 pixels, \u00e0 droite de 8 pixels, en bas de 0 pixel et \u00e0 gauche de 8 pixels.\n<\/p>\n<p>\n  Cela va cr\u00e9er un triangle pour nous.\n<\/p>\n<p>\n  Ensuite, nous allons cr\u00e9er une <strong>bordure solide<\/strong> pour cette section et <strong>rendre transparentes les zones droite, inf\u00e9rieure et gauche<\/strong>, de sorte que seule la zone sup\u00e9rieure du \u00ab\u00a0triangle\u00a0\u00bb soit visible.\n<\/p>\n<pre><code>border-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code><\/pre>\n<p>\n  Apr\u00e8s avoir rendu la bordure solide, nous appliquons des couleurs pour les c\u00f4t\u00e9s sup\u00e9rieur, droit, inf\u00e9rieur et gauche de la bordure.\n<\/p>\n<p>\n  Nous devrions utiliser le m\u00eame \u00ab<strong>border-color:rgba();<\/strong> \u00a0\u00bb attribut ici, que nous avons utilis\u00e9 pour styliser le cercle autour du point d’interrogation.\n<\/p>\n<p>\n  <code>border-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code>\n<\/p>\n<p>\n  Ici, nous avons donn\u00e9 <strong>la couleur noire<\/strong> (0,0,0) pour la <strong>partie sup\u00e9rieure<\/strong> de la bordure et <strong>r\u00e9duit son opacit\u00e9 \u00e0 0,3<\/strong> pour nous donner une couleur vert fonc\u00e9, tout comme nous l’avons fait pour obtenir le style du cercle autour du \u00ab\u00a0?\u00a0\u00bb.\n<\/p>\n<p>\n  Nous avons masqu\u00e9 les parties <strong>droite, inf\u00e9rieure et gauche<\/strong> de la bordure en rendant le <strong>transparent<\/strong>.\n<\/p>\n<p>\n  M\u00eame si nous avions cr\u00e9\u00e9 les bordures droite et gauche, elles sont transparentes. La seule bordure color\u00e9e est la bordure sup\u00e9rieure. Ce que cela fera, c’est que la <strong>bordure cach\u00e9e \u00e0 gauche et \u00e0 droite nous donnera un effet triangle en conjonction avec la bordure sup\u00e9rieure color\u00e9e<\/strong>.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Le r\u00e9sultat final ressemblera \u00e0 ceci.\n<\/p>\n<p>\n  Si vous faites une recherche Google pour \u00ab\u00a0i\u00a0\u00bb, vous en apprendrez plus \u00e0 ce sujet.\n<\/p>\n<p>\n  Les attributs \u00ab<strong>Margin-left<\/strong>\u00bb et \u00ab<strong>top<\/strong>\u00bb sont utilis\u00e9s pour positionner ce triangle centr\u00e9 au-dessus du cercle.\n<\/p>\n<pre><code>top: -20px;\nmargin-left: -8px;<\/code><\/pre>\n<p>\n  <strong>Nous avons<\/strong> maintenant cr\u00e9\u00e9 la queue triangulaire au bas de notre info-bulle, qui pointe vers le \u00ab\u00a0?\u00a0\u00bb pancarte.\n<\/p>\n<p>\n  Ensuite, nous devons styliser la r\u00e9gion rectangulaire arrondie de l’info-bulle o\u00f9 les informations sont affich\u00e9es. Pour cela, nous utiliserons l’ attribut <strong>::after<\/strong>.\n<\/p>\n<pre><code>.tooltip::after{\ncontent: \"some text\";\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}<\/code><\/pre>\n<p>\n  C’est pourquoi j’ai utilis\u00e9,\n<\/p>\n<p>\n  <code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Dans la section d’ouverture de la pseudo classe <strong>.tooltip :: after<\/strong>\n<\/p>\n<p>\n  Nous devons maintenant donner \u00e0 cette section la <strong>m\u00eame couleur d’arri\u00e8re-plan<\/strong> que celle que nous avons utilis\u00e9e pour cr\u00e9er la r\u00e9gion du triangle (qui est noire, avec un alpha\/opacit\u00e9 de 0,3).\n<\/p>\n<p>\n  J’ai donc ajout\u00e9,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  Ensuite, j’ai centr\u00e9 cette section avec notre \u00ab\u00a0point d’interrogation\u00a0\u00bb, comme avant. J’utilise une largeur de 300 px pour la bo\u00eete rectangulaire arrondie et une marge de -150 px pour la centrer par rapport au point d’interrogation.\n<\/p>\n<pre><code>top: -20px;\nwidth:300px;\nmargin-left: -150px;<\/code><\/pre>\n<p>\n  Maintenant, nous allons donner un rembourrage et arrondir les bords du rectangle (en appliquant border-radius).\n<\/p>\n<pre><code>border-radius: 10px;\ncolor: #fff;\npadding: 14px;<\/code><\/pre>\n<p>\n  Cela d\u00e9finira \u00e9galement la couleur du texte \u00e0 l’int\u00e9rieur du rectangle arrondi en blanc (#fff).\n<\/p>\n<p>\n  Maintenant, la r\u00e9gion rectangulaire arrondie qui affiche le contenu est pr\u00eate. Mais pourtant, il <strong>n’est pas correctement positionn\u00e9<\/strong>. La page HTML actuelle ressemblera \u00e0 ce qui est illustr\u00e9 ci-dessous.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Fondamentalement, le rectangle arrondi <strong>se superpose au-dessus de la r\u00e9gion \u00ab\u00a0triangle\u00a0\u00bb<\/strong> que nous avions cr\u00e9\u00e9e, puisque ::before et ::after utilisent la m\u00eame marge et sont plac\u00e9s 20 pixels au-dessus du point d’interrogation.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Nous devons <strong>amener la bo\u00eete rectangulaire arrondie juste au-dessus de la section triangulaire<\/strong> que nous avons cr\u00e9\u00e9e pr\u00e9c\u00e9demment, afin qu’elles apparaissent ensemble comme une <strong>bo\u00eete de discussion<\/strong>.\n<\/p>\n<p>\n  Nous ne savons pas quelle est la hauteur exacte du rectangle arrondi pour le placer juste au-dessus du triangle, ce que nous voulons, c’est transformer <strong>verticalement 100% de la hauteur du rectangle arrondi<\/strong> afin qu’il soit plac\u00e9 juste au-dessus du triangle.\n<\/p>\n<p>\n  \u00c9tant donn\u00e9 que ces deux \u00e9l\u00e9ments (triangle et rectangle arrondi) utilisent, <code>top: -20px;<\/code>nous avons juste besoin de <strong>transformer verticalement le haut du rectangle arrondi en une hauteur de pixel<\/strong> \u00e9gale \u00e0 sa propre hauteur.\n<\/p>\n<p>\n  Pour cela, nous utilisons,<code>transform: translateY(-100%);<\/code>\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Nous avons maintenant une structure appropri\u00e9e qui ressemble \u00e0 une bo\u00eete d’information.\n<\/p>\n<h5>\n  \u00c9tape 7 : Obtenir les informations r\u00e9elles dans l’info-bulle<br \/>\n<\/h5>\n<p>\n  Notre dernier d\u00e9fi ici est d’obtenir le bon contenu, qui contient plus d’informations, \u00e0 l’int\u00e9rieur de l’info-bulle.\n<\/p>\n<p>\n  N’oubliez pas que nous avions plac\u00e9 le contenu qui devrait appara\u00eetre \u00e0 l’int\u00e9rieur de l’info-bulle dans notre fichier HTML.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  En utilisant CSS, nous pouvons r\u00e9cup\u00e9rer un attribut \u00e0 partir d’un \u00e9l\u00e9ment HTML. Nous allons le faire en utilisant <strong>attr()<\/strong> dans le <strong>.tooltip::after<\/strong> pseudo CSS.\n<\/p>\n<p>\n  Ainsi, au lieu de,<code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Nous allons utiliser<code>content: attr(data-tooltip);<\/code>\n<\/p>\n<p>\n  Ici, \u00a0\u00bb <strong>data-tooltip<\/strong> \u00a0\u00bb est notre attribut HTML.\n<\/p>\n<p>\n  En utilisant l’attribut que nous avons donn\u00e9 pour le contenu en HTML, nous pourrons appeler ce contenu et l’afficher dans notre pseudo CSS. Le r\u00e9sultat de ceci sera comme indiqu\u00e9 ci-dessous,\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  \u00c0 pr\u00e9sent. tout ce que nous avons \u00e0 faire est de rendre notre info-bulle invisible au d\u00e9but et de n’appara\u00eetre que lorsque les utilisateurs survolent le point d’interrogation (?).\n<\/p>\n<p>\n  C’est tr\u00e8s facile \u00e0 faire.\n<\/p>\n<p>\n  Pour rendre l’info-bulle invisible au d\u00e9but, nous rendrons <strong>son opacit\u00e9 \u00ab\u00a00\u00a0\u00bb<\/strong> dans le pseudo CSS suivant que nous avons \u00e9crit auparavant.\n<\/p>\n<pre><code>.tooltip::before .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\n}<\/code><\/pre>\n<p>\n  Pour l’effet Hover nous ajouterons un nouveau pseudo CSS en bas de notre fichier style.css. D\u00e9finissons <strong>l’opacit\u00e9 sur \u00ab\u00a01\u00a0\u00bb pour l’\u00e9tat survol\u00e9<\/strong> afin que l’info-bulle ne s’affiche qu’au survol.\n<\/p>\n<pre><code>\/* CSS for Hover effects *\/\n \ntooltip:hover::before.tooltip:hover::after{\nOpacity:1;\n}<\/code><\/pre>\n<p>\n  Ce pseudo CSS ne d\u00e9termine que l’\u00e9tat survol\u00e9, puisque nous avons utilis\u00e9 \u00ab\u00a0:hover\u00a0\u00bb apr\u00e8s le CSS principal .tooltip\n<\/p>\n<p>\n  Maintenant, notre info-bulle CSS est pr\u00eate.\n<\/p>\n<p>\n  Mais la transition de l’info-bulle ne sera pas aussi fluide que pr\u00e9vu.\n<\/p>\n<p>\n  Vous pouvez rendre les effets de transition encore meilleurs en utilisant CSS. Pour cela, il vous suffit d’ajouter la r\u00e8gle de transition ci-dessous en CSS pour les pseudo classes ::before et ::after.\n<\/p>\n<p>\n  Pour en savoir plus sur les styles de transition r\u00e9alisables avec CSS, lisez notre article \u00ab<a href=\"https:\/\/inform.click\/fr\/donnez-vie-a-vos-pages-web-avec-des-animations-et-des-transitions-css\/\" title=\"CSS Animations And Transitions\">CSS Animations And Transitions<\/a> \u00bb.\n<\/p>\n<pre><code>.tooltip::before.tooltip::after {\ntransition: all ease 0.3s;\n}<\/code><\/pre>\n<p>\n  Ce processus est beaucoup plus simple et moins compliqu\u00e9 que la mise en \u0153uvre d’une info-bulle \u00e0 l’aide de JavaScript.\n<\/p>\n<p>\n  Pour votre r\u00e9f\u00e9rence, trouvez le fichier HTML et CSS final pour vous entra\u00eener.\n<\/p>\n<h4>\n  Fichier HTML final pour tester l’info-bulle<br \/>\n<\/h4>\n<pre><code>\n\n\n<\/code><\/pre>\n<p><meta charset=\"utf-8\" \/><\/p>\n<pre>\n<\/pre>\n<p><title><br \/>\n  CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<h4>\n  <code>Fichier CSS final Cr\u00e9ation d'une info-bulle<\/code><br \/>\n<\/h4>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}\n \nform{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}\n \nformlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}\n \nforminput{\nmargin: 010px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #fff;\n}\n \n\/* --------- Tooltip Styles ---------- *\/\n \n.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}\n.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\ntransition: allease0.3s;\n}\n.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}\n.tooltip::after{\ncontent: attr(data-tooltip);\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}\n \n\/* Hover states *\/\n \n.tooltip:hover::before, .tooltip:hover::after{\nopacity: 1;\n}<\/code><\/code><\/pre>\n<h3>\n  D\u00e9mo en direct<br \/>\n<\/h3>\n<p>\n  Voir l’ <a href=\"http:\/\/www.instantshift.com\/demo\/css-tooltip\/\" target=\"_blank\" rel=\"noopener\">info-bulle CSS<\/a> en direct en action.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Source d’enregistrement: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/05\/11\/create-tooltip-using-css\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Vous savez probablement d\u00e9j\u00e0 ce qu’est une info-bulle. Une info-bulle est une ic\u00f4ne ou un texte qui, lorsqu’il est survol\u00e9, nous donne plus d’informations dans une bulle ou une fen\u00eatre contextuelle. Vous trouverez normalement des info-bulles dans les formulaires, mais vous pouvez les placer l\u00e0 o\u00f9 les utilisateurs ont besoin de plus d’informations. Dans l’image ci-dessus, le cercle avec le point d’interrogation \u00e0 l’int\u00e9rieur affiche une info-bulle. Au survol, cette info-bulle donne plus d’informations sur les types de caract\u00e8res que votre mot de passe doit inclure. Vous pouvez obtenir des frameworks pour impl\u00e9menter des info-bulles sur votre site Web, mais la plupart du temps, ces frameworks utilisent JavaScript pour y parvenir. Dans ce \u2026<\/p>\n","protected":false},"author":1,"featured_media":223378,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[67,119,54],"tags":[],"class_list":["post-251383","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-4","category-outils-web","category-web-et-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts\/251383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/comments?post=251383"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts\/251383\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/media\/223378"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/media?parent=251383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/categories?post=251383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/tags?post=251383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}