Comment ajouter une info-bulle en HTML
Une info-bulle est un morceau de texte qui apparaît lorsque vous déplacez la souris sur un élément d’un programme. Comme leur nom l'indique, ils étaient à l'origine utilisés pour expliquer quels icônes d'outils étaient représentés dans les programmes, mais ils peuvent également être utilisés à d'autres fins. Il existe plusieurs façons de créer une info-bulle en HTML, le langage de programmation Web, notamment en utilisant JavaScript ou CSS pour en créer une et en utilisant l'attribut "title" sur une image HTML.
L'attribut de titre d'image
Presque tous les sites Web modernes ont des images et sont généralement insérées dans la page à l’aide de la balise "img" . Dans la balise "img", un attribut "src" spécifie l'emplacement Web ou l'URL de l'image. Des attributs supplémentaires peuvent spécifier la largeur et la hauteur de l'image et un texte "alt" sera affiché si l'image ne peut pas être affichée. Un attribut "title" peut spécifier un texte qui apparaîtra comme une info-bulle lorsque vous survolerez l'image. Utilisez ceci pour mettre une info-bulle sur une icône ou une autre image en ligne.
Par exemple, vous pourriez avoir une balise "img" qui ressemble à
Le texte alternatif est affiché si l'image ne peut pas être affichée pour une raison quelconque, par exemple si le navigateur ne parvient pas à la charger depuis son emplacement d'origine. Certains navigateurs plus anciens l'afficheront également comme info-bulle s'il n'y a pas d'attribut "title" . Il est également utilisé par les lecteurs d'écran aidant les personnes malvoyantes à naviguer sur le Web. Il est donc judicieux d'inclure du texte alternatif dès que possible.
Notez que les utilisateurs de téléphones intelligents peuvent ne pas être en mesure de voir l'attribut title. Par conséquent, vous pouvez utiliser une autre méthode d'info-bulle qui affiche les info-bulles au toucher si cela pose un problème.
Options de l'info-bulle JavaScript
Vous pouvez également ajouter une info-bulle à une image ou à tout autre élément HTML à l'aide du langage de programmation JavaScript. Vous pouvez utiliser une bibliothèque existante à cette fin. De nombreuses bibliothèques open source sont disponibles et vous permettent d'utiliser des info-bulles avec une variété de conceptions différentes.
Vous pouvez également écrire votre propre code JavaScript pour implémenter des info-bulles personnalisées. Vous voudrez probablement utiliser les événements de souris JavaScript, tels que les passages de souris activés lorsque vous déplacez la souris au-dessus de quelque chose et l'événement de sortie de souris déclenché lorsque vous le déplacez hors d'un objet pour afficher et masquer vos info-bulles. L'utilisation d'une bibliothèque de développement inter-navigateurs telle que jQuery pourrait faciliter les choses.
Vous voudrez également vous demander comment vos info-bulles doivent s'afficher sur les appareils mobiles, par exemple si elles doivent apparaître lorsqu'un utilisateur touche ou maintient l'élément auquel l'info-bulle est attachée. Vous pouvez y arriver en utilisant des événements tactiles qui fonctionnent sur la plupart des téléphones intelligents modernes.
Possibilités d’infos CSS
Il est également possible de créer des info-bulles pour certaines applications ne nécessitant aucun code JavaScript, même pour les fonctionnalités HTML sans attribut "title".
Vous pouvez utiliser des feuilles de style en cascade, le langage utilisé pour le style HTML, pour créer des info-bulles qui apparaissent uniquement lorsque quelqu'un passe la souris sur un élément particulier d'une page Web. Pour ce faire, utilisez le pseudoselecteur ": hover" CSS qui permet d'appliquer des règles de style spéciales lorsque la souris est positionnée ou survolée sur cet élément. Vous voudrez probablement utiliser une règle de style "display: none" lorsque l'info-bulle ne doit pas être présente et "display: block" lorsqu'elle doit être présente pour la faire apparaître et disparaître comme il convient.
Utiliser CSS, plutôt que JavaScript, pourrait signifier un code plus simple et que davantage de concepteurs et développeurs sont habitués à travailler, mais vous pourriez perdre une partie de la flexibilité de JavaScript, en fonction de la manière dont vous souhaitez que vos info-bulles se comportent.