Aller au contenu

Les options avancées des infobulles tooltip avec le Framework BootStrap 3

La suite du cours précédent sur les infobulles, ici vous allez apprendre a créer des infobulles complexes avec popover de BootStrap 3.

Vous pourrez carrément pouvoir intégrer dans vos infobulles du code HTML 5, ce qui inclus les images, les boutons, etc.

Tout est dans la formation ci-dessous.

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

Les options avancées des infobulles tooltip avec le Framework BootStrap 3

Bonjour à tous et bienvenu sur Développement Facile.

Dans le dernier cours vous avez appris à créer des infobulles avec BootStrap 3, c’était des infobulles relativement simples avec un arrière-plan noir et le texte en blanc, avec différents effets pour gérer l’apparition de l’infobulle. Dans cette vidéo, dans ce nouveau cours, vous allez apprendre à créer les infobulles avancées, avec du contenu HTML complet dedans, vous allez voir comment utiliser toutes ces possibilités-là.

Les infobulles avancées ou popovers

C’est partie tout de suite pour découvrir comment créer du contenu HTML complexe avec les infobulles. Vous avez déjà l’attribut data-toggle, c’est popover, vous n’allez plus utiliser tooltip, vous allez utiliser popover, ça va indiquer à l’API BootStrap que vous utilisez une infobulle complexe avec du contenu HTML beaucoup plus complexe, tout simplement, et le contenu de l’entête c’est renseigné avec l’attribut data-original-title. Vous avez un titre et en-dessous vous avez du contenu en-dessous dans votre infobulle quand ça va apparaitre toujours sur un lien HTML, vous avez votre exemple ici, sur un lien HTML avec un bouton, le titre data-original-title Hello, le titre bouton, data-content bienvenu sur Développement Facile, ça c’est le contenu.

Manipuler les infobulles avancées avec l’API

Vous avez également l’API JavaScript, c’est ce que je vous conseille d’utiliser l’API JavaScript, c’est là ou ce sera beaucoup simple de créer des contenus HTML complexes, il y a une fonction popover avec différents paramètres, vous passez le paramètre HTML, la valeur c’est false par défaut, si vous voulez insérer des balises HTML dans votre infobulle, il faut mettre HTML à true, ensuite vous avez le paramètre content c’est le contenu de l’infobulle, et c’est là ou vous pouvez utiliser toutes les balises HTML 5, y compris des images, créer une infobulle avec des images, avec des boutons, ce que vous voulez, et le paramètre title c’est l’entête de l’infobulle, le titre de l’infobulle.

Vous avez également sur votre écran qui s’affiche plusieurs fonctions pour l’infobulle.  $(« #l’identifiant de l’infobulle »).popover(« show ») pour afficher l’infobulle, c’est comme le tooltip, l’infobulle complexe marche avec .tooltip show hide toggle popupover show hide toggle. Show pour afficher l’infobulle, hide pour la masquer, toggle pour faire l’effet de masquage et d’affichage de votre infobulle, tout simplement.

Exemple d’application

On passe ensemble au code source, là, on a utilisé, avec jQuery, la fonction, la méthode popover en lui transmettant paramètre HTML oui, true, le contenu, on met une image par exemple, on met du texte ici, un deuxième paragraphe, un lien avec un bouton, le lien en bouton, tiens, on va le mettre en danger, pour qu’il ressorte bien, et le titre et encore des exemples HTML. On mouseover l’infobulle complexe va apparaître sur le passage de la souris au-dessus de l’élément, là on a nos infobulles classiques ici, l’infobulle avancée, je vais recharger la page, je ne l’ai pas rechargée, avec le bouton danger, voilà, l’image, le texte, le titre avec du contenu HTML, une infobulle complexe mais beaucoup plus simple, et là vous pouvez bien évidemment utiliser du contenu HTML tout simplement.

Salut cours Développement Facile, ce sont des infobulles différentes à chaque fois, et l’infobulle complexe, vous voyez, quand on regarde le code, ce n’est pas si compliqué que ça, il suffit de connaître les attributs et leurs valeurs pour créer des infobulles comme celle-ci, avec l’API JavaScript je trouve personnellement que c’est plus simple de créer une infobulle, après c’est vous qui choisissez, et ça renvoie bien sur Développement Facile.

Votre plan d’actions !

Maintenant c’est à vous de jouer, vous avez déjà reçu deux cours sur les infobulles simples tooltip, les infobulles complexes popover, vous retrouverez le code source sous ce cours vidéo, si vous avez des questions posez-les également sous ce cours vidéo, je vous invite dès maintenant à regarder la deuxième vidéo, à la fin de cette vidéo il y a un lien qui va s’afficher, la vidéo se transforme en lien cliquable, vous avez juste à attendre la fin de la vidéo et à cliquer sur ce lien et vous serez automatiquement redirigés vers la deuxième vidéo où vous allez découvrir le framework BootStrap 3, HTML 5 et CSS3 dans le détail avec de nombreux exemple de code source, tout ce qu’il faut pour que vous puissiez réussir vos sites Internet plus rapidement, plus simplement et compatibles avec les smartphones, les tablettes, les ordinateurs de bureau, je vous dit à tout de suite dans la deuxième vidéo

[/ppmtoggle] [/ppmaccordion]

Télécharger le code sur les infobulles complexes

Retrouvez le code source commenté pour ajouter des infobulles complexe dans votre site Web avec BootStrap 3

Téléchargement du code source Exemple d'infobulles complexes

Cliquez ici pour télécharger le code source Exemple d'infobulles complexes

Pensez vous utiliser les infobulles dans votre site Web ?

Utilisez la zone commentaire pour partager vos avis sur les infobulles complexes de BootStrap 3

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>