Créez des infosbulles Tooltip avec le Framework jQuery UI

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Dans ce nouveau cours dédié au Framework jQuery UI, vous allez apprendre comment apporter un complément d’informations à vos internautes avec les fameuses infosbulles ou tooltip.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Créez des infosbulles Tooltip avec le Framework jQuery UI

Bonjour à tous et bienvenu sur Développement Facile.

Voici un nouveau cours consacré au Framework à l’extension jQuery UI, dans ce nouveau cours vous allez apprendre à utiliser les infos bulles, rappelez-vous quand vous avez un formulaire il y a une petite bulle qui apparaît pour vous donner une aide, une indication, vous pouvez les gérer avec jQuery, c’est une très bonne nouvelle.

Les infobulles

C’est le tooltip en anglais qui est utilisé souvent pour donner une indication supplémentaire sur l’utilité de telle ou telle fonction mise en page à l’utilisateur, il suffit d’utiliser une balise div par exemple, de la récupérer et de lui attribuer tooltip, tout simplement.

Les options – les infosbulles

Il y a différentes options, content ça définit le contenu de l’infobulle,
disabled pour désactiver l’infobulle,
hide pour mettre une animation sur l’infobulle,
items je passe assez vite les options parce que dans les calendriers, dans les boites de dialogue, c’est un peu tout le temps les mêmes options qui reviennent,
position pour définir la position de l’infobulle par rapport à votre élément,
show pour définir une animation sur l’ouverture de l’infobulle,
tooltipClass c’est une classe CSS que vous pouvez utiliser avec votre infobulle pour changer la couleur du texte, la taille du texte avec le CSS vous pouvez faire énormément de choses,
track ça permet à l’infobulle de suivre le curseur de la souris, c’est marrant.

Les méthodes – les infobulles

On peut faire énormément de choses, vous avez la méthode close pour fermer l’infobulle,
destroy pour supprimer l’infobulle,
disable pour la désactiver,
enable pour l’activer,
open pour ouvrir l’infobulle.

Tout ce qui est option pour définir les options de l’infobulle, récupérer la valeur d’une ou plusieurs options, widget pour récupérer un objet jQuery, qui est l’infobulle lui-même.

Les événements – les infobulles

Vous avez les événements sur vos infobulles, l’événement close se déclenche lorsque l’infobulle est fermée,
Create lorsque l’infobulle est créée,
open lorsque l’infobulle apparaît suite à un focus ou à un mouseover.

Les infobulles

Vous pouvez modifier la taille des infobulles avec la classe ui-tooltip, la classe CSS ui-tooltip, vous définissez la taille du texte, le padding, que ce que vous voulez dans votre infobulle. Vous pouvez évidemment positionner l’infobulle, je vous invite, il y a toutes les explications, je ne vais pas relire le PowerPoint vous pouvez le mettre sur pause, le lire à tête reposée en plein écran c’est de l’HD. Vous avez l’option content pour mettre du contenu HTML dans votre infobulle, vous pouvez mettre une image, évidemment, mettre ce que vous voulez comme balise HTML dans votre infobulle, track à true, l’infobulle va suivre le curseur de votre souris et vous pouvez écouter des événements pour ajouter des actions sur votre infobulle.
Je vous montre tout ça dans un exemple de code source, bien évidemment, vous pouvez charger le contenu de votre infobulle via la technologie Ajax, ce que je vous recommande fortement, c’est très pratique, et l’option tooltip ça permet d’attribuer un style CSS avec des propriétés particulières à votre infobulle.

Exemple d’infobulles

On passe ensemble au code source, je vous montre ça, ce sera appelé via Ajax, via Ajax renseignez votre meilleure adresse e-mail en italique et tout, le contenu sera appelé via Ajax de l’infobulle, là. On crée notre infobulle sur la balise e-mail voilà, on a un input e-mail avec un champ à renseigner l’e-mail, le bouton open pour ouvrir l’aide, là c’est pour voir la photo sur un lien, on met sur un lien et grâce à l’infobulle on peut rajouter, on clique sur le lien une photo, tout simplement, et on peut fermer l’aide. Je vais vous montrer à quoi s’attendre, je préfère vous montrer le code source. On crée les boutons, rappelez-vous les cours précédents sur les boutons, très simple à créer les boutons, et là l’affichage, l’information sur la disparition de la bulle après le clique sur les boutons, on peut choisir d’afficher au clic sur le bouton open d’afficher l’infobulle, au clic sur le bouton fermer de fermer l’infobulle, ouvrir, fermer avec un petit effet, regardez l’effet, de l’infobulle.
Les effets sont gérés ici, effet fermeture de l’infobulle, effet d’ouverture de l’infobulle, le contenu tooltip on charge le contenu de l’infobulle via Ajax donc l’URL et en cas de succès on mets les data, les données directement dans l’infobulle, le contenu de l’infobulle, le contenu est téléchargé via Ajax en direct, et sur l’ouverture de l’infobulle, on définit sa largeur maximum ici, donc sur link, regardez, link c’est ici lorsque l’utilisateur va cliquer sur le lien, on va charger le contenu de l’infobulle, on spécifie le contenu sur la balise a c’est la bannière. Qu’est-ce qu’il se passe ?
On lit le texte, automatiquement une bannière s’affiche avec un petit effet que vous pouvez modifier bien évidemment, donc c’est très sympa, là l’infobulle suit le texte de la souris, il doit y avoir l’option track à true ici, regardez qui est activé, là vous avez renseigné votre meilleure adresse e-mail, [email protected], vous pouvez ouvrir l’aide, voilà, fermer l’aide, ouvrir l’aide, fermer l’aide, là l’infobulle suit le déplacement de la souris et elle disparaît, et quand vous lisez un texte ça peut être très intéressant de mettre cette option, avec par exemple, au survol plutôt que de mettre une image vous pouvez mettre du texte, ce que vous voulez pour donner une définition à l’utilisateur.

Votre plan d’actions !

Les infobulles sont vraiment très simples à utiliser, très pratiques, il n’y a rien de compliqué c’est du jQuery, très simple, rapide, facile à utiliser, compatible avec la majorité des navigateurs, si vous avez des questions posez-les directement sous ce cours et sur Développement Facile, sous ce cours vous avez le code source complet et commenté en téléchargement, comme ça vous pourrez le réutiliser facilement pour implémenter l’infobulle sur vos sites Web. Je vous invite dès maintenant à regarder la deuxième vidéo, il y a un lien vidéo 2, là, juste au-dessus de cette vidéo, ou juste en-dessous, dans laquelle je vous explique comment je vais vous aider pendant quatre mois avec un suivi personnalisé individuel, à tout savoir sur le Framework jQuery, son extension jQuery UI et le Framework Dojo, je vous explique tout ça dans la deuxième vidéo, cliquez ici pour créer des applications, des sites Internet que vos utilisateurs adorent, et créés très rapidement, qui soient performants sur la majorité des navigateurs web, sur les tablettes, les smartphones etc.
Vidéo 2 cliquez, et moi je vous dis à très bientôt pour le prochain cours sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple infosbulle Tooltip avec jQuery UI

Et voici le code source infosbulle avec jQuery UI.

Downloads

  • Exemple d'infosbulle Tooltip avec jQuery UI
    Exemple d'infosbulle Tooltip avec jQuery UI

    Code source commenté pour utiliser le widget infosbulle Tooltip du Framework jQuery UI.
    Le fichier zip contient également jQuery UI version 1.10.4 et jQuery version 1.10.2

Partagez vos infosbulles jQuery UI

Utilisez les commentaires, pour partager le code source de vos infosbulles jQuery UI les plus réussies !

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS