Plus de 40 scripts d'aide utiles avec CSS, JavaScript et jQuery
Un élément d’interface utilisateur intéressant, les info-bulles (également appelées infotips), font apparaître une petite boîte lorsque la le curseur de la souris survole un texte ou une image avec des informations en ce qui concerne l'élément survolé. En termes d’expérience utilisateur, les info-bulles fournissent aux utilisateurs la source d’information la plus rapide et la plus simple. sans rien cliquer.
Le moyen le plus simple d’ajouter des info-bulles à votre texte est d’utiliser une balise HTML. ou TITRE =””, ALT =””. Cependant, il y en a vraiment cool conceptions et styles d'infobulles que vous pouvez créer avec JavaScript et CSS en utilisant des scripts d'info-bulles. Nous allons jeter un coup d'oeil.
CSS
Balloon.css - Balloon est une bibliothèque CSS composé avec SasS et LESS pour afficher une info-bulle interactive. Le contenu et la position de l'info-bulle sont configurables à l'aide du bouton Les données- attribut. Vous pouvez afficher l'info-bulle à gauche, à droite ou à gauche. Vous pouvez même ajouter des émoticônes au contenu. Balloon.css peut être installé via NPM et / ou chargé depuis CDNJS.
Simptip - Fabriqué avec SasS permettant de reconfigurez et recompilez le code pour l'adapter à vos besoins. La position et le contenu de l’info-bulle sont configurables via le nom de la classe et le info-bulle de données attribut. Simptip est disponible en tant que Package NPM, Yarn et Bower.
Indice.css - Hint.css est l’une des bibliothèques CSS les plus populaires en matière d’affichage des info-bulles. Il est utilisé par de nombreux sites Web populaires tels que Fiverr, Webflow et Tridiv. Contrairement aux deux autres bibliothèques CSS, Hint.css utilise aria-label Vous pouvez configurer la taille et la couleur à travers les noms de classe en utilisant la méthodologie BEM. Hint.css est disponible sur NPM, Bower et CDNJS.
Micropointe - Une autre bibliothèque CSS géniale pour la création d’une info-bulle construite avec “Accessibilité” à l'esprit, Microtip les usages aria-label pour contenir le contenu de l'info-bulle et Les données- attribut pour configurer la taille et la position de l'info-bulle.
Il utilise une variable CSS qui vous permet de personnaliser l’info-bulle avec un simple fichier CSS. Les variables CSS sont déjà prises en charge par de nombreux navigateurs Web et mobiles. Microtip est disponible sous forme de NPM, de package de fil et de fichier UNPkg CDN..
Wenk - C'est juste 733 octets. Une bibliothèque super légère écrit en CSS super moderne avec CSSNext, LESS et SCSS Vous pouvez donc personnaliser et recompiler les styles comme vous le souhaitez. Wenk peut être téléchargé depuis NPM, Yarn et les services CDN gratuits suivants: rawgit.com et unpkg.com.
Tooltippy - Un autre bibliothèque CSS légère étant juste environ 1 Ko en taille. Tooltippy comprend plusieurs thèmes prédéfinis pour le style de l'info-bulle. Il est écrit avec un pré-processeur CSS nommé Stylus. Voir les instructions sur comment vous pouvez étendre ou personnaliser ces thèmes.
Conseils élégants - Cette bibliothèque est livré avec quelques thèmes pré-construits cela peut être changé avec les noms de classe fournis. Contrairement aux autres les bibliothèques qui reposent sur HTML5 Les données- ou la aria-label Attribut, ElegantTips nécessite l'ajout d'un élément supplémentaire pour former l'info-bulle. Cela vous permet de ajouter littéralement n'importe quel contenu à l'info-bulle au-delà d'un texte simple.
Tootik - Non seulement cette bibliothèque CSS fournit la feuille de style au format CSS, LESS et SasS, elle fournit également une interface graphique facile à utiliser pour personnaliser l'info-bulle. Vous pouvez simplement copier et coller le code HTML généré par cet outil. C'est si simple.
VanillaJS
TippyJS - Propulsé par Popper.js, TippyJS est livré avec un abondance d'options pour configurer l'info-bulle. Nous pouvons personnaliser les animations, la flèche d’info-bulle, la largeur, la taille, le thème, etc. Il fournit également des fonctions de rappel avec lesquelles vous pouvez exécuter une fonction lorsque l'info-bulle est affichée et masquée. Ces fonctionnalités font de TippyJS l’une de nos puissantes bibliothèques JavaScript sur notre liste pour créer des info-bulles..
Info-bulle Darsain - Cette bibliothèque fournit l'implémentation de base d'une info-bulle. Néanmoins, il fournit des options étendues pour configurer le comportement tootip, et une ensemble de noms de classe pour changer l'apparence de l'info-bulle. L'info-bulle fonctionne bien dans les navigateurs plus anciens tels que IE9 et, si nécessaire, IE8 avec quelques ajustements.
Bubb - Bubb pourrait convenir aux utilisateurs avancés de JavaScript. En utilisant ses API étendues, outre l'affichage de texte simple, vous pouvez ajouter par programme un contenu HTML plus complexe à l'info-bulle. C'est vraiment cool; vous pouvez vous référer à la documentation les exemples.
Popper - Contient une abstraction technique pour créer quelque chose qui “pops”, comme une info-bulle, un popover et des listes déroulantes. TippyJS l'utilise comme base de bibliothèque et est utilisé par de grands noms du Web tels que Bootstrap, Microsoft et Atlassian..
YY Tooltip - Contrairement aux autres bibliothèques, YY Tooltip ne nécessite pas l'ajout d'un élément HTML ou d'attributs. Il fonctionne entièrement avec JavaScript et le contenu, la position et les couleurs sont définis dans un objet plutôt que dans un élément HTML. Il est parfait pour être utilisé avec une application Web JavaScript complète..
Position.js - Une autre excellente bibliothèque JavaScript native pour créer des info-bulles, Position.js fournit une interface graphique pour configurer la fonction et simplement copier et coller le code généré. Position.js peut être utilisé avec React.js ou Vue.js.
Infobulle de Bezet - Cette bibliothèque fournit 14 options pour afficher l'info-bulle; comme sur le droite, la gauche, bas, centre gauche, extrémité droite, en bas au centre, etc. En plus de cela, il est aussi assez intelligent pour pouvoir ajuster la position de l'info-bulle en fonction de l'espace disponible entourant l'info-bulle. Découvrez la démo.
MouseTip - Cette bibliothèque JavaScrtipt créera un info-bulle qui se déplace le long de la position du curseur. L'info-bulle est configurée avec un non standard mousetip- attribuer au lieu d'utiliser le HTML5 Les données- attribut. Mousetip est disponible en tant que module NPM.
Internetips - Assez similaire à MousetTip, l'info-bulle générée par cette bibliothèque suit la position du curseur. Tout est configuré via l'objet JavaScript au lieu de HTML et le les attributs sont également construits pour les navigateurs modernes. C'est léger et rapide.
MTip - Une bibliothèque JavaScript pour Tooltip avec grande compatibilité de navigateur. Il est compatible avec IE8, entièrement personnalisable à l’aide des options, et vous pouvez ajouter une info-bulle à n’importe quel élément, même sur un écran. img (un élément d'image).
Bubblesee - une bibliothèque JavaScript légère qui fournit une fonctionnalité simple d'un “infobulle”. Il est facile d'utiliser la bibliothèque JavaScript sans options compliquées pour personnaliser la sortie. Un fichier Sass est fourni si vous souhaitez modifier l'apparence de l'info-bulle. Découvrez la démo.
Tipfy - Construit avec la syntaxe JavaScript moderne, ES6, Tipfy est juste 2 Ko en taille. La bibliothèque fournit deux versions de fichiers: tipfy.min.js fournir le script avec syntaxe ES6 moderne, et tipfy.es5.min.js si vous avez besoin de compatibilité avec les anciens navigateurs. Il utilise Les données- attribut pour personnaliser l'info-bulle; la data-tipfy-side, par exemple, sert à définir la direction de l'info-bulle et à utiliser data-tipfy-text attribut pour ajouter le contenu de l'info-bulle.
jQuery
Info-bulle - Cette bibliothèque fournit des options étendues pour personnaliser presque tout, comme le thème, animation, prise en charge tactile, contenu, déclencheur d'ouverture et de fermeture, etc. Il fournit également un écouteur d'événements et des rappels personnalisés permettant aux développeurs d'étendre l'info-bulle avec des fonctions personnalisées. En outre, étant un plugin jQuery, le l'info-bulle fonctionnerait dans un navigateur plus ancien, comme IE6, en fonction de la version de jQuery utilisé.
Protip - Un autre plugin étendu de jQuery, Protip supporte 49 positions, HTML pour le contenu des info-bulles, support des icônes, rappels personnalisés, et beaucoup plus. Protip fournit une interface graphique vous permettant de personnaliser l'info-bulle en toute simplicité.
PowerTip - Ce plugin jQuery apporte également des options et des API offrant aux développeurs un grand nombre de façons différentes de mettre en œuvre les info-bulles. Elle supporte navigation au clavier; faire apparaître la popup lors de la navigation dans les éléments avec Languette clavier. PowereTip est disponible en tant que module NPM. Il peut être utilisé avec RequireJS et Browserify.
Info-bulle Aria accessible - Un plugin jQuery avec une fonctionnalité d'accessibilité intégrée, l'info-bulle est conçu pour afficher une boîte de dialogue avec un titre, une multiligne de texte et un bouton de fermeture. C'est l'un de nos propres sur notre liste.
TipsJS - Un simple plugin jQuery, mais il apporte des fonctionnalités assez distinctives. le le contenu de l'infobulle est défini avec un info-bulle de données attribut. De plus, nous pouvons également envelopper le contenu avec des caractères spéciaux pour formater le contenu de manière similaire au formatage Markdown. On peut utiliser * rendre le contenu audacieux, ~ pour l'italique, et ^ pour la rubrique.
Info-bulle sombre - Cette bibliothèque fournit des fonctionnalités vraiment utiles pour alimenter l'info-bulle. Par exemple, nous pouvons ajouter un bouton de confirmation - Oui et Non, atténuer l'arrière-plan lorsque l'info-bulle est affichée et ajouter des éléments HTML au contenu. Je pense que vous devriez vraiment consulter la page de démonstration.
Info-bulle Aria - Autre info-bulle avec fonctionnalité d’accessibilité intégrée, ce plugin jQuery est conforme à WAI-ARIA 1.1. Il est réactif d'une manière que vous pouvez fournir différentes configurations pour différentes tailles de fenêtres. L'info-bulle Aria est disponible en tant que module NPM nommé t-aria-tooltip.
Toolbar.js - Bien que l’autre plug-in jQuery ne puisse afficher que du texte simple ou du contenu HTML dans une info-bulle, cette Le plugin jQuery crée une barre d'outils. L'info-bulle contiendrait deux liens ou plus avec une icône qui effectuera généralement une action sur Cliquez sur, comme n'importe quelle barre d'outils. Consultez la documentation et des exemples.
VueJS
Info-bulle en V - V-Tooltip est un composant Vue.js optimisé par Popper.js sous le capot. Il fournit un nouvelle directive nommée infobulle qui peut être ajouté à n'importe quel élément pour créer une info-bulle. le infobulle peut contenir le contenu de l'info-bulle ou les options. En dehors de la coutume infobulle directive, vous pouvez également ajouter l'info-bulle avec le v-popover composant. Avec ce composant, vous pouvez ajouter du contenu plus complexe dans l'info-bulle avec le composant Vue.js ou HTML.
Infobulle Vue-Bulma - Un composant Vue.js pour créer une info-bulle basée sur Bulma UI Framework. Cette bibliothèque fait partie du composant Vue Bulma. Mais le composant d'info-bulle est disponible en tant que module NPM nommé info-bulle que vous pouvez l'utiliser comme composants autonomes.
Vue-Directive-Tooltip - Globalement, il est similaire au composant V-Tooltip basé sur Popper.js et fournit la même directive appelée infobulle. Cependant, il ne semble pas fournir la v-popover composant.
Vue-Tippy - Cette bibliothèque englobe Tippy.js dans un composant Vue.js. Il comporte une directive Vue.js personnalisée appelée v-tippy cela fonctionne comme un attribut HTML; nous pouvons ajouter du contenu pour les info-bulles ou les options pour le personnaliser. Il rend également un composant Vue.js personnalisé sur le contenu de l'info-bulle à l'aide du html option.
VueJS-Popover - Une Vue.js personnalisée avec une directive personnalisée appelée v-popover et deux composants personnalisés à savoir
Vue-Hint - Un plugin Vue.js qui enveloppe Hint.css. Les fonctionnalités du plugin v-hint-css directive pour ajouter l'info-bulle. Il apporte le même ensemble d'options que Hint.css, afin que vous puissiez les ajouter en tant qu'objet JavaScript ou modificateur Vue.js.
Réactions
Réagissez Joyride - Un composant React pour afficher un ensemble d’info-bulles qui guider les nouveaux utilisateurs pour qu'ils se familiarisent avec votre nouvelle application.
Flotter de réaction - Cette bibliothèque englobe Popper.js dans un composant React nommé Floater, de sorte qu’il présente les mêmes fonctionnalités que Floater. Vous pouvez ajouter des info-bulles et des popups, et vous pouvez aussi jouer avec ce composant à travers ce bac à sable.
Réagir Autotip - Un simple composant React avec la fonction de positionnement automatique, eact Autotip sera ajuster automatiquement la position de l'info-bulle lorsque l'espace disponible change autour.
Réagir Tippy - Construit sur Tippy.js et Popover.js. Cette bibliothèque introduit un Info-bulle composant qui vous pouvez inclure dans votre application React.
Indice de réaction - Un composant React prolongeant Hint.css. Les composants ajoutent quelques fonctionnalités qui ne sont pas disponibles dans Hint.css, telles que position automatique, délai et fonction de rappel.
Plus
Info-bulles de braise - Un composant Ember.js pour créer des info-bulles, il est construit sur Popper.js. Le composant est également conçu dans une optique d'accessibilité et continue de s'améliorer pour se conformer à environ 508 exigences en la matière..
D3 Astuce - un plugin D3.js. D3.js est une bibliothèque JavaScript pour la visualisation de données telle que des graphiques, des cartes, des diagrammes, etc. Ce plugin vous permet d'afficher une info-bulle en plus de ces données..
