Tutoriels d'info-bulles utiles et plugins jQuery

L'info-bulle est un élément commun de l'interface utilisateur graphique. Il est utilisé conjointement avec un curseur, généralement un pointeur de souris. L'utilisateur place le curseur sur un élément, sans cliquer dessus, et une info-bulle peut apparaître - une petite "boîte de survol" avec des informations sur l'élément survolé.

J'ai compilé quelques tutoriels et plugins jQuery pour les info-bulles.

1. TinyTips - Plugin jQuery léger pour les info-bulles

TinyTips est un plugin jQuery très léger qui permet d'ajouter des info-bulles à pratiquement n'importe quel élément d'une page. Entièrement documenté et convivial pour les concepteurs.

2. Balisage de photos de style Flickr à l'aide de jQuery

jQuery Photo Tagger contient environ 1 000 lignes de code. En tant que tel, vous pouvez soit consulter la page du projet, soit essayer la démo en ligne par vous-même. Veuillez noter que vous devez maintenir la touche CTRL enfoncée lorsque vous cliquez sur la souris pour créer un hotspot.

Démo | Télécharger

3. TipTip Custom Tooltip jQuery Plugin avec zéro image

TipTip utilise l'attribut title comme le fait l'infobulle du navigateur natif. Cependant, le titre sera copié puis supprimé de l'élément lors de l'utilisation de TipTip afin que l'info-bulle du navigateur ne s'affiche pas.
TipTip ne génère qu'un seul ensemble d'éléments contextuels au total, plutôt que de générer un ensemble d'éléments contextuels pour chaque élément auquel TipTip est appliqué. Cela permet d'accélérer les choses et de réduire le temps de traitement. Les éléments générés sont tous des éléments div et sont ajoutés à la fin de l'élément body.

4. Comment créer les nouvelles annotations visuelles avec CSS3

ZURB nous a appris comment créer les nouvelles annotations visuelles. La solution n'était pas techniquement trop complexe. Avec Notable, ils ont adopté le concept de dégradation gracieuse : ils tirent parti des nouvelles techniques CSS qui se dégradent proprement sur les anciens navigateurs.

Démo

5. Affichez vos liens sous forme de liste déroulante avec Pluralink

Pluralink est un plugin javascript incroyable pour organiser plusieurs liens dans votre texte.

6. Effet de survol en niveaux de gris avec CSS et jQuery

Greyscale Hover Effect avec CSS & jQuery s'appuie sur CSS Sprites et quelques lignes de jQuery, mais nécessite un peu de préparation avant de pouvoir être implémenté. Il n'est pas recommandé pour les projets à grande échelle et probablement le meilleur pour afficher des éléments de portefeuille.

7. Regardez de plus près avec AnythingZoomer jQuery Plugin

Vous avez un petit domaine. Vous passez la souris dessus. Une zone apparaît vous donnant un zoom plus proche. C'est un plugin jQuery qui le fait. Je ne vais pas vous dire à quoi vous devez l'utiliser ni élaborer des scénarios d'utilisation. Votre propre créativité peut vous y aider.

Démo

8. Créer une info-bulle riche en contenu avec JSON et jQuery

Ce didacticiel montrera comment créer des info-bulles alimentées par jQuery, avec des informations extraites d'un tableau JSON.

Démo

9. Remplacez votre info-bulle par défaut par Pretty (mb) Tooltip

(mb)Tooltip est une belle info-bulle pour votre page Web dans jQuery.

Télécharger

10. Captify affiche de jolies légendes d'images lors du survol

Captify est un plugin pour jQuery écrit par Brian Reavis pour afficher des légendes d'image simples et jolies qui apparaissent au survol. Il a été testé sur Firefox, Chrome, Safari et le maudit Internet Explorer. Captify a été inspiré par ImageCaptions, un autre plugin jQuery pour afficher des légendes comme celles-ci.

11. Prévisualiser les images avec imgPreview jQuery Plugin

Peter Higgins a créé Dojo Zoomer. Il est divisé en 3 panneaux. En survolant l'image sur le panneau de gauche, le panneau de droite affiche dynamiquement la partie recadrée de l'image, afin que vous puissiez vous concentrer explicitement sur la partie de l'image principale qui vous intéresse.

12. Loupe d'image jQuery Javascript sous GPL

JQZoom est une loupe d'image javascript construite au sommet du populaire framework javascript jQuery.jQzoom est un script génial et vraiment facile à utiliser pour agrandir ce que vous voulez.

13. Info-bulles transparentes simples avec jQuery et CSS

Les info-bulles CSS sont très populaires dans la conception Web moderne et contrairement à la croyance populaire, il est très facile de les créer, en particulier avec l'un des frameworks javascript les plus populaires.

Démo

14. Magic Toolbox - Outils de zoom Javascript et Flash Image

Magic Toolbox a créé 2 incroyables outils de zoom d'image javascript (Magic Zoom et Magic Magnify). Magic Zoom est un outil de zoom JavaScript. C'est la meilleure façon d'afficher des images avec des détails incroyables.

15. Prototip 2 – Créez facilement de belles info-bulles

Prototip vous permet de créer facilement des info-bulles simples et complexes à l'aide du framework javascript Prototype.

Démo

16. Info-bulle et aperçu d'image les plus simples avec jQuery

L'info-bulle et l'aperçu d'image les plus simples sont l'une de ces bulles contextuelles ressemblant à des info-bulles qui apparaissent lorsque vous survolez un lien ou une vignette.

Démo

17. Info-bulles contextuelles de style Coda avec jQuery

Coda est l'un des nouveaux outils de développement Web pour Mac - et il est populaire parmi les concepteurs et les développeurs.

18. Taggify Clickable Image Region Shows Popup Tooltip

Taggify est un widget Web qui permet aux blogueurs et aux éditeurs d'améliorer leurs sites en ajoutant des info-bulles d'image liées à certaines régions de l'image.
Démo

19. Info-bulles discrètes avec Javascript et CSS

Les bulles d'aide sont un moyen facile d'ajouter (via un peu de CSS et de javascript) des info-bulles fantaisistes avec une forme de ballon à n'importe quelle page Web.

Démo

20. Info-bulles d'entrée et de sortie en fondu pour Prototype et Scriptaculous

CoolTips est une technique de remplacement légère et discrète des info-bulles des navigateurs Web JavaScript.
CoolTips est utilisé pour remplacer les info-bulles conventionnelles des navigateurs Web. Les info-bulles obtiennent le contenu de l'attribut title, il est donc totalement discret. CoolTips est une classe OO basée sur les frameworks Prototype JS et script.aculo.us.

21. Sweet Titles Transparent et Fading Tooltips

Sweet Titles Fading Tooptips n'est pas une contrefaçon de NICE Titles et n'essaie pas non plus d'améliorer la tentative révisée de Dunstan. Et il n'est certainement pas extrait de l'un de ces scripts infestés de gestionnaires d'événements de Dynamic Drive .

Démo

22. Prototip La plupart des fonctionnalités Info-bulles pour Prototype

Prototip vous permet de créer facilement des info-bulles simples et complexes à l'aide du framework javascript Prototype. Si vous utilisez également Scriptaculous, vous pouvez même leur ajouter de jolis effets.

Démo

23. Info-bulles légères BoxOver DHTML/Javascript

BoxOver utilise javascript / DHTML pour afficher des info-bulles sur un site Web. La mise en œuvre des info-bulles ne nécessite toutefois aucune connaissance en DHTML ou en javascript. Il existe de nombreux ajustements qui peuvent être configurés pour le personnaliser selon vos besoins en définissant l'attribut "titre" d'une balise.