Une info-bulle, \u00e9galement connue sous le nom d’ info-bulle de survol CSS<\/strong>, affiche les informations du visiteur lorsqu’il d\u00e9place la souris sur un \u00e9l\u00e9ment sp\u00e9cifique.<\/p>\n Vous souhaitez \u00e9galement ajouter des info-bulles \u00e0 votre WordPress? Ce guide montre comment ajouter une info-bulle dans WordPress.<\/p>\n Une info-bulle est une petite zone de texte qui appara\u00eet lorsque vous d\u00e9placez la souris sur une zone<\/strong> d’un site WordPress. Ces cases sont id\u00e9ales pour ajouter des informations suppl\u00e9mentaires sur le terrain.<\/p>\n D\u00e9placer les informations dans la bo\u00eete emp\u00eache le site de devenir surcharg\u00e9.<\/p>\n Certains les utilisent, par exemple, dans des tableaux de prix<\/strong>. Le texte donne une br\u00e8ve description et les prix.<\/p>\n En les survolant, les t\u00e9l\u00e9spectateurs r\u00e9v\u00e8lent une description d\u00e9taill\u00e9e de l’\u00e9l\u00e9ment. De cette fa\u00e7on, le tableau n’est pas encombr\u00e9 de trop de texte.<\/p>\n D’autres exemples sont les d\u00e9finitions de mots, le cr\u00e9dit source<\/strong>, les commentaires<\/strong> et les cartes<\/strong>. Fondamentalement, tous les \u00e9l\u00e9ments peuvent \u00eatre d\u00e9plac\u00e9s vers une bo\u00eete d’info-bulle.<\/p>\n D’autres utilisent une info-bulle pour donner plus d’informations sur une photo lorsque vous la survolez. Cela peut inclure l’ heure, le lieu, le photographe<\/strong> et bien plus encore.<\/p>\n Le but est de clarifier un point ou de donner plus d’informations.<\/p>\n Les info-bulles sont \u00e9galement appel\u00e9es termes de glossaire<\/strong>, astuces<\/strong> ou messages<\/strong>. Ils sont utiles sur les ordinateurs pilot\u00e9s par la souris et les sites Web et formulaires WordPress mobiles.<\/p>\n Ceci est important \u00e0 prendre en consid\u00e9ration. De nos jours, une grande partie de la navigation sur Internet se fait \u00e0 partir d’un appareil mobile plut\u00f4t que sur un ordinateur de bureau.<\/p>\n L’espace sur l’\u00e9cran d’un appareil mobile est beaucoup plus limit\u00e9 que sur un grand \u00e9cran d’ordinateur. Les info-bulles sont la r\u00e9ponse \u00e0 ce probl\u00e8me.<\/p>\n Attention toutefois \u00e0 ne pas mettre trop d’informations dans l’infobulle non plus.<\/p>\n Il existe deux fa\u00e7ons d’ajouter une info-bulle \u00e0 un site Web WordPress. Cet article discutera des deux m\u00e9thodes.<\/p>\n Dans un premier temps, l’utilisation des plugins<\/strong> est pass\u00e9e en revue, puis la m\u00e9thode manuelle<\/strong>. La m\u00e9thode manuelle implique un peu de codage.<\/p>\n L’avantage d’un plugin WordPress pour ajouter des info-bulles WordPress est qu’elles permettent de gagner du temps<\/strong>. Voici donc une liste de cinq plugins WordPress d’info-bulle faciles \u00e0 utiliser.<\/p>\n Le premier plugin d’info-bulle est Shortcodes Ultimate. Il est simple \u00e0 utiliser et compatible avec la plupart des th\u00e8mes WordPress populaires.<\/p>\n Il fait plus qu’ajouter des info-bulles \u00e0 WordPress. En fait, il propose plus de 50 shortcodes pour une vari\u00e9t\u00e9 de fonctionnalit\u00e9s, le tout gratuitement.<\/p>\n WordPress est facile \u00e0 utiliser. Il est petit, l\u00e9ger et rapide.<\/p>\n Il s’agit d’une solution jQuery qui ajoute du contenu HTML dans l’\u00e9diteur WordPress, WYSWYG. Entre autres choses, il ajoute de l’audio, des liens de t\u00e9l\u00e9chargement, des images, des PDF, des connexions aux m\u00e9dias sociaux et des vid\u00e9os.<\/p>\n Le glossaire g\u00e9n\u00e8re automatiquement des listes de mots en fonction du contenu d’un site Web. Il regroupe les mots et les d\u00e9finitions dans un dictionnaire.<\/p>\n Les mots et les d\u00e9finitions sont ensuite li\u00e9s aux mots de la copie. Ensuite, il cr\u00e9e le glossaire d’info-bulles correspondant.<\/p>\n Cela permet aux utilisateurs d’ajouter des info-bulles au texte brut et aux liens correspondants sur la publication ou le site Web. Il utilise l’interface utilisateur graphique du shortcode TinyMCE.<\/p>\n Il guide l’utilisateur tout au long du processus. Une connaissance approfondie du codage n’est donc pas n\u00e9cessaire.<\/p>\n Cela ajoute simplement un bouton suppl\u00e9mentaire \u00e0 l’\u00e9diteur de publication. Cliquer sur ce bouton ins\u00e8re un shortcode d’info-bulle dans le contenu.<\/p>\n Ensuite, les utilisateurs ajoutent du contenu \u00e0 l’info-bulle et attribuent l’\u00e9l\u00e9ment qui d\u00e9clenche l’info-bulle.<\/p>\n Ensuite, l’accent est mis sur la m\u00e9thode CSS manuelle.<\/p>\n La section pr\u00e9c\u00e9dente traitait de l’utilisation d’un plugin WordPress pour ajouter des info-bulles \u00e0 un site WordPress. Ce que les plugins font dans les coulisses est de d\u00e9finir plusieurs styles CSS.<\/p>\n Il permet ensuite \u00e0 l’utilisateur de choisir parmi un ensemble de param\u00e8tres pour personnaliser l’info-bulle. Le plugin g\u00e9n\u00e9rera alors le shortcode.<\/p>\n Bien s\u00fbr, il est possible d’effectuer toutes ces t\u00e2ches manuellement. Cela n\u00e9cessite des connaissances avanc\u00e9es en HTML et jQuery<\/strong>.<\/p>\n Lorsque le code est d\u00e9j\u00e0 g\u00e9n\u00e9r\u00e9, il suffit de l’ajouter.<\/p>\n L’astuce suppl\u00e9mentaire est l’ajout de CSS<\/strong> au th\u00e8me. Pour ce faire, le moyen le plus simple consiste \u00e0 utiliser WordPress Customizer.<\/p>\n Voici ce que les trois classes CSS doivent faire\u00a0:<\/p>\n Ce code qui fait ces choses ressemblera \u00e0 ceci\u00a0:<\/p>\n Ces cha\u00eenes de code g\u00e9n\u00e8rent une bo\u00eete vide et la positionnent par rapport au texte parent. Ensuite, il compose le texte et d\u00e9finit des param\u00e8tres tels que l’alignement, la couleur et le remplissage.<\/p>\n La derni\u00e8re partie masque la bo\u00eete jusqu’\u00e0 ce qu’elle doive appara\u00eetre lorsque vous passez la souris sur l’\u00e9l\u00e9ment parent.<\/p>\n Apr\u00e8s avoir ajout\u00e9 les classes CSS au th\u00e8me, assurez-vous de les enregistrer. Les info-bulles WordPress sont maintenant pr\u00eates \u00e0 \u00eatre ajout\u00e9es aux sites WordPress.<\/p>\n Pour les ajouter\u00a0:<\/p>\n Modifiez le nom s’il a re\u00e7u un nom diff\u00e9rent lors de son ajout.<\/p>\n Stylez les info-bulles WordPress<\/strong> de la m\u00eame mani\u00e8re que les autres \u00e9l\u00e9ments CSS.<\/p>\n Changez la couleur, personnalisez la bo\u00eete, etc. Adaptez-le au reste de la conception du site Web.<\/p>\n Les infobulles WordPress sont id\u00e9ales pour ajouter des informations suppl\u00e9mentaires, sans encombrer l’apparence visuelle.<\/p>\n Si un visiteur ne survole pas un \u00e9l\u00e9ment particulier du site Web, l’information n’est pas visible. Cela ajoute \u00e0 l’exp\u00e9rience utilisateur.<\/p>\n L’aspect propre et \u00e9pur\u00e9 devient de plus en plus important. De plus en plus de personnes utilisent des appareils mobiles pour naviguer sur Internet.<\/p>\n Sur un petit \u00e9cran, les popups sont tr\u00e8s ennuyeux.<\/p>\n D’autre part, les visiteurs appr\u00e9cient les info-bulles. Ils apparaissent en cas de besoin et informent au lieu d’essayer de vendre.<\/p>\n Les deux approches pour ajouter des info-bulles \u00e0 un site WordPress abord\u00e9es dans cet article sont :<\/p>\n Cela n\u00e9cessite l’ajout de trois styles CSS au th\u00e8me. Le guide a montr\u00e9 comment utiliser le personnalisateur pour ce faire.<\/p>\n Si vous avez aim\u00e9 lire cet article sur l’ajout d’une info-bulle WordPress, vous devriez consulter celui-ci sur la fa\u00e7on de supprimer des th\u00e8mes WordPress<\/a>.<\/p>\n Nous avons \u00e9galement \u00e9crit sur quelques sujets connexes tels\u00a0 que comment ajouter des filigranes aux images<\/a>, comment v\u00e9rifier la version de WordPress<\/a>, cr\u00e9er un tableau de comparaison avec les plugins WordPress<\/a>, comment t\u00e9l\u00e9charger un fichier HTML dans WordPress<\/a>, o\u00f9 sont stock\u00e9es les pages WordPress<\/a> et pourquoi WordPress est-il si difficile \u00e0 utiliser<\/a>.<\/p>\nQu’est-ce qu’une info-bulle WordPress ou CSS Hover\u00a0?<\/h2>\n
![\"Tutoriel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-187133-61e88fb3268a3.jpg\")
<\/a><\/p>\nAjouter une info-bulle WordPress avec un plugin<\/h2>\n
Shortcodes Ultime<\/h3>\n
<\/a><\/p>\nInfobulles WordPress<\/h3>\n
<\/a><\/p>\nGlossaire<\/h3>\n
<\/a><\/p>\nInfo-bulle WordPress<\/h3>\n
<\/a><\/p>\nPlug-in d’info-bulles simples<\/h3>\n
<\/a><\/p>\nAjouter manuellement une info-bulle WordPress<\/h2>\n
Acc\u00e9dez au personnalisateur de th\u00e8me<\/h3>\n
<\/a><\/p>\n\n
\n
Ajouter des classes CSS au th\u00e8me<\/h3>\n
\n
.tooltip {\nposition: relative;\ndisplay: inline-block;\nborder-bottom: 1px dotted\nblack;}\n\n.tooltip .tooltiptext {\nvisibility: hidden;\nwidth: 120px;\nbackground-color: black;\ncolor: #fff;\ntext-align: center;\nborder-radius: 6px;\npadding: 5px 0;\n\n\/* Position the tooltip *\/\nposition: absolute;\nz-index: 1;}\n\n.tooltip:hover .tooltiptext {\nvisibility: visible;}<\/code><\/pre>\nAjouter des info-bulles \u00e0 l’aide de l’\u00e9diteur de blocs<\/h2>\n
<\/a><\/p>\n\n
<div\n\nclass=\"tooltip-text\">Parent text\n\n\u00a0 <span class=\"tooltiptext\">Tooltip\n\ntext here!<\/span>\n\n<\/div><\/code><\/pre>\n\n
<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\nFin des r\u00e9flexions sur l’ajout d’info-bulles WordPress<\/h2>\n
\n