Les infobulles sont géniales, on ne peut tout simplement pas le nier. Ils fournissent un moyen simple, prévisible et simple de fournir à vos utilisateurs des informations utiles et sensibles au contexte, et ils ont l’air sympa de démarrer.
Nous sommes tous d’accord sur la qualité des info-bulles, mais leur mise en œuvre peut être très différente. Si vous en êtes à la case départ et que vous recherchez des idées d’infobulle pour votre projet actuel, vous êtes au bon endroit. Nous avons vingt-cinq options différentes qui se divisent en deux catégories: JavaScript et CSS. Quelle que soit la méthode que vous envisagez d'utiliser, nous disposons des meilleures techniques disponibles, que vous pouvez améliorer à l'aide de techniques de classe POO telles que les classes JavaScript utilisant le langage de programmation JS ++ de Roger Poon.
JavaScript et jQuery
Astuce - L'info-bulle jQuery
Laissons de côté l'idée de garder le meilleur pour la fin. Si vous ne voulez pas passer en revue vingt-cinq options différentes et déterminer laquelle est la meilleure, téléchargez simplement Tipped. Les infobulles sont attrayantes, faciles à mettre en oeuvre et offrent une multitude d'options. Vous aurez du mal à dépasser celui-ci.
Opentip - L'info-bulle gratuite
Opentip est un autre plugin tooltip de premier ordre. Comme Tipped, il existe une multitude d'options pour vous permettre de faire à peu près tout ce que vous voulez avec elles. La conception des pointes elles-mêmes montre un peu plus de caractère que celles de Tipped, ce qui pourrait être ou ne pas être une bonne chose pour votre projet.
Info-bulle Javascript
Simple mais efficace. Celui-ci vous donne des options de positionnement, permet l'intégration d'images et peut être déclenché par un certain nombre d'événements différents.
Bibliothèque de bulles d'aide JavaScript SkinnyTip
Celui-ci n'est pas l'option la plus attrayante, mais il est plutôt léger. La bibliothèque entière mesure moins de 10 Ko, vous n'avez donc pas à craindre de ralentir votre page. Certes, cela semble un peu ancien, mais cela fonctionne toujours.
qTip - Le plugin d'aide de jQuery
qTip fonctionne dans tous les principaux navigateurs, se dégrade bien lorsque JavaScript est désactivé, se positionne facilement et propose des animations et des coins arrondis. C'est un plugin vraiment solide et je vous recommande vivement de le vérifier. Regardez aussi la version 2.
Simpletip - Un simple plugin d'aide sur les astuces jQuery
Simpletip est exactement comme annoncé. Cela a non seulement l'air simple, mais aussi très facile à utiliser. Il existe également des effets de chargement visuels dont vous pouvez tirer parti si vous voulez aller plus loin.
Tooltipster - Le plugin d'aide pour jQuery
Ditch les plugins qui ont été autour depuis Netscape. Tooltipster est un plugin impressionnant d’info-bulles moderne, valide en HTML5. Il est léger, rapide, convivial pour le navigateur et facile à utiliser avec CSS.
Info-bulle - Interface utilisateur jQuery
Les utilisateurs de jQuery n'ont pas besoin d'aller très loin pour trouver d'excellentes info-bulles robustes, elles sont directement intégrées à l'interface utilisateur de jQuery. Ils sont vraiment simples et il y a de fortes chances pour que vous trouviez une tonne d'autres choses dans la bibliothèque qui amélioreront également votre site.
TipTip jQuery Plugin
J'aime tout ce que Drew Wilson fait. Il est le gars derrière Screeny, Space Box, Pictos et un tas d'autres trucs cools. Le fait qu'il ait créé ce plugin est suffisant pour me faire le télécharger. À moins de 3,5 Ko, cette chose est super légère et super incroyable.
Tooltipsy
Tooltipsy confie la fonctionnalité à JavaScript, puis utilise du code CSS clair et facilement personnalisable pour tout le reste. Changer l'apparence, la taille, l'animation; deviens fou et fais-le toi-même.
Pompette
Tipsy vous donne des info-bulles très minimes et élégantes sans peluche. Il possède toutes les fonctionnalités dont vous avez besoin, comme le positionnement et la décoloration, et rien de superflu que vous n'utiliserez jamais.
Info-bulle réactive et adaptée aux mobiles
Ceci est une info-bulle pour la prochaine génération de web design. Il s'adapte facilement à n'importe quelle fenêtre d'affichage et affiche intelligemment l'info-bulle dans une taille et une position optimisées pour l'écran actuel. Si vous faites de la conception réactive, comme vous devriez le faire, vous devriez consulter les info-bulles réactives.
aToolTip - Une info-bulle jQuery simple par Ara Abcarians
aToolTip vous permet d'avoir une info-bulle qui bouge constamment avec votre curseur ou reste en place sur son élément partenaire. Il a des options de survol ou de clic, est inférieur à 4 Ko et possède des fonctions de rappel.
Colortip - un plugin d'aide jQuery
Le téléchargement d'un plugin d'info-bulle prédéfini est cool, mais pourquoi ne pas franchir le pas et apprendre à en construire un? Colortip est un téléchargement gratuit, mais il fait partie d'un didacticiel détaillé étape par étape pour la création du plug-in à partir de zéro.
ChillTip jQuery Plug-In
ChillTip est un plugin tooltip remarquable et flexible qui vous permet d’implémenter les astuces de différentes manières. Il peut être utilisé avec les attributs span, img, anchor et "à peu près tout ce qui utilise l'attribut title".
Pop! Menus pop simples avec jQuery
Ce n'est pas assez une info-bulle, mais elle est étroitement liée, alors je pensais l'inclure de toute façon. Au lieu d'avoir un petit pop-up en vol stationnaire, cela vous donne un petit menu déroulant cliquable où vous pouvez cacher des informations supplémentaires.
Info-bulles CSS
Info-bulles CSS
Pour commencer la section info-bulle CSS, nous nous tournons vers le développeur principal, David Walsh. Ce didacticiel explique plus en détail comment créer la forme d’info-bulle classique avec CSS et moins comment implémenter avec succès une infobulle CSS pure.
Infobulle CSS
C’est un outil vraiment génial qui vous permet de créer facilement des info-bulles CSS pures en remplissant simplement quelques champs. Vous pouvez entièrement personnaliser l'apparence et le contenu à l'aide du formulaire simple, puis saisir le code et le coller dans votre projet.
Infobulles sexy avec seulement CSS
Un bon tutoriel sur Six Revisions pour créer des info-bulles très robustes et attrayantes avec CSS. Le style est une sorte de dialogue d’avertissement avec une icône et une zone colorée.
Infobulle CSS
Une info-bulle CSS pure, simple, légère et multi-navigateurs. C'est un téléchargement gratuit et prend seulement un kb maigre.
Info-bulles CSS sur les bulles
Une info-bulle CSS simple et pétillante. Pas grand chose ici, mais ça marche très bien!
Info-bulle CSS facile
Celui-ci s'appelle? Easy CSS Tooltip? pour une raison. Il faut quatre lignes de code: une ligne de HTML et trois lignes de CSS. C'est tout! Cela ne devient pas beaucoup plus facile les gens.
Info-bulles CSS et bulles de dialogue
Dans cet article, Konigi expérimente deux méthodes différentes pour fournir des info-bulles CSS pures. Le premier utilise le titre et le second utilise une étendue.
Infobulles CSS par Adam Whitcroft
Adam Whitcroft vous apprend à créer des info-bulles avec des attributs de données. Cela peut sembler un peu effrayant, mais ils sont en réalité très faciles à utiliser. Assurez-vous de lire celui-ci.
Info-bulles CSS pures - Trezy.com
Ici, l'auteur présente un ensemble d'objectifs concrets tels que la compatibilité IE8 et le code HTML minimal, puis vous montre comment il a construit des info-bulles CSS pures qui répondent à ces objectifs. Si vous souhaitez une info-bulle CSS utilisable dans un environnement professionnel multi-navigateurs, la lecture est bonne.
Qu'est-ce que vous utilisez pour les info-bulles?
Maintenant que vous avez vu ces vingt-cinq ressources d’infos, il est temps d’aller de l’avant et de commencer à créer des info-bulles! Laissez un commentaire ci-dessous et dites-nous quelle ressource vous préférez ou si vous en avez trouvé une qui ne figure pas dans la liste ci-dessus.