Pour créer un tooltip, on utilise la balise <a>, avec l attribut : data-toggle="tooltip".

Transcription

1 Les info-bulles

2 Tooltip - Principe Les tooltips sont les infobulles les plus basiques proposées par Bootstrap 3. Lorsque l utilisateur survole un élément HTML avec sa souris, une petite fenêtre noire contenant du texte apparaît. 3. Pour créer un tooltip, on utilise la balise <a>, avec l attribut : data-toggle="tooltip". Le texte du tooltip est stocké dans l attribut title. Pour initialiser le tooltip, on utilise la fonction tooltip() de l API JavaScript de Bootstrap Il convient de programmer l'apparition du tooltip via Jquery ou d'initialiser la fonction tooltip() via JQuery et d'utiliser le plug-in bootstrap tootip.js p() y p g p pj 175

3 Tooltip - Exemple 901_tooltips.html <div class="container"> <p>denique Antiochensis ordinis <a href="#" class="tooltip-test" data-toggle="tooltip" title="ceci est une infobulle!">vertices sub</a>uno elogio iussit occidiideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia <a href="#" class="tooltip-test" data-toggle="tooltip" title="une autre infobulle.">restitisset</a>. Denique Antiochensis ordinis vertices sub uno elogio iussit occidi <a href="#" class="tooltip-test" t test data-toggle="tooltip" togg too t title="et t t une troisième infobulle!">ideo efferatus</a>, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset. </p> <script> $(document).ready(function () { $('a.tooltip-test').mouseover(function () { $(this).tooltip('show'); }); }); </script> 176 </div> Lorsque les liens de classe tooltip-test sont survolés par la souris, on affiche l'infobulle On gére l'apparition via JQuery

4 Tooltip - Exemple 901_tooltips.html 177

5 Manipulation des tooltips La fonction tooltip() possèdent des attributs permettant sa manipulation : Position : data-placement Valeur Position data-placement="bottom" En bas data-placement="top" En haut data-placement="right" À droite data-placement="left" left À gauche 178

6 Manipulation des tooltips autres attributs Attribut "data-animation" : Par défaut, le tooltip s affiche et disparaît par un effet de fondu rendu possible grâce aux fonctions fadein() et fadeout() de jquery. Pour supprimer cet effet, il convient de donner la valeur "false" àl attribut "data- animation", exemple : <a href="#" data-toggle="tooltip" data-animation="false" title="ceci est une infobulle!">vertices sub</a> Attribut "data-html" : permet d afficher du contenu HTML (attribut à true) Exemple : <a href="#" data-toggle="tooltip" data-html="true" title="et une troisième<i>infobulle!</i>">ide efferatus</a> Attribut "data-title" : Cet attribut est l équivalent de title="". S'il est vide ou absent, le texte t renseigné dans "data-title" titl " est affiché dans l infobulle ll 179

7 Manipulation des tooltips autres attributs 902_tooltipsEvent.html Attribut "data-trigger" : Permet de lister les événements qui déclencheront l apparition de l infobulle. Les valeurs disponibles sont les suivantes : "hover", "click", "focus" et "manual". Exemple : Le code ci-dessous, permet d afficher une infobulle suite aux événements "hover" et "click" : <a href="#" class="tooltip-test" data-toggle="tooltip" data-trigger="hover focus" title="ceci est une infobulle!"> Denique Antiochensis ordinis</a> On utilise Jquery pour initialiser la fonction tooltip() d'initalisation des infos bulle, et le plug-in tooltip.js <script src="js/tooltip.js"></script> La gestion des évènements est gérées par la liste des évènements cités dans data-trigger, ici évènement de survol et focus, script d'initialisation : 180 <script> $(document).ready(function(){ $('.tooltip-test').tooltip(); test') tooltip(); }); </script>

8 Les popovers Popovers : Collection d infobulles avancées composées d un en-tête et d un corps, pour y insérer du contenu HTML Balise <a> dans laquelle nous insérerons une série d attributs (mêmes que ceux des tooltips). Comme pour les tooltips, l initialisation d un popover se fait nécessairement via Jquery par la fonction popover() La fonction popover() admet trois options : Option HTML content title Description Par défaut, la valeur de cette option est "false". Pour intégrer du contenu HTML dans notre infobulle, nous devrons donc spécifier HTML : "true". Cette option permet de décrire le corps de l infobulle. Nous pouvons y insérer l ensemble des balises mises à disposition par le HTML5. La valeur de "title" permet d afficher le contenu de l en-tête du popover. 181

9 Les popovers Exemple avec JQuery <div class="container"> <p>denique Antiochensis ordinis <a href="#" class="popover-test" data-toggle="popover" data-content="contenu de notre popover." role="button" data-original-title="titre"> vertices sub </a> uno elogio iussit occidi ideo efferatus.</p> <script> $(document).ready(function () { $('a.popover-test').mouseover(function () { $(this).popover('show'); }); $('a.popover-test').mouseout(function () { $(this).popover('hide'); }); }); </script> </div> 903_popovers.html Apparition et disparition gérée manuellement par JQuery 182

10 Les popovers Exemple avec data-trigger <div class="container"> <p>denique Antiochensis ordinis <a href="#" class="popover-test" data-toggle="popover" data-content="contenu de notre popover." role="button" data-original-title="titre" data-trigger="hover focus" >vertices sub</a> uno elogio iussit occidi ideo efferatus.</p> <script> $(document).ready(function () { $('a.popover-test').popover(); }); </script> </div> 904_popovers02.html Initialisation, évènements gérés é par data-trigger 183

11 Les popovers Autre exemple 905_popovers03.html 184

12 Fenêtres modales : Utilisées dans le cadre d'info bulles complexes ou de formulaires Elles sont composées : d'un dun entête d'un corps d'un pied de fenêtre Exemple : Apparition d'une fenêtre modale à partir d'un bouton Les fenêtres modales <button class="btn" data-toggle="modal" data-target="#id-fenetre-modale"> //texte du bouton </button> Cible du bouton : fenêtre modale Id du conteneur de la fenêtre modale La fenêtre est composée d'une succession de div répartie en six sections, dont les 3 premières sont imbriquées 185

13 Les fenêtres modales La fenêtre : Première section : Contient 4 attributs obligatoires : tabindex="-1", role="dialog", aria-labelledby="mymodallabel" et ariahidden="true". Deuxième section : définition de la position et de la taille de la fenêtre à l'écran : CSS Smartphones (< 768 px) Tablettes et plus (>=768 px) Position Centrée sur l écran Centrée sur l écran Width auto 600 px Padding 10 px -top : 30 px; -bottom : 30 px; Troisième section : contenu de la fenêtre, classe :.modal-content Quatrième section : contenu de l'entête, classe.modal-header Cinquième section : le corps, classe.modal-body Sixième section : le pied, classe.modal-footer 186

14 187 Les fenêtres modales 906_FenetreModale.html <div class="container"> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#fenetre-modale"> Bouton d'appel Afficher la fenêtre modale </button> <div class="modal fade" id="fenetre-modale" tabindex="-1"... role="dialog" aria-labelledby="mymodallabel" y aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="mymodallabel"> Titre de la fenêtre</h4> 1 S S. lafenêtre 2 S. position 3 S. contenu 4 S. entête </div> <div class="modal-body"> <p class="lead"><img src="chrome_logo_2x.png"... </div> <div class="modal-footer"> <a href=" class="btn btn-primary pull-right">voir le Site</a> </div> 5 S. corps 6 S. pied

15 Les fenêtres modales 906_FenetreModale.html 188

16 Les fenêtres modales Manipulation des attributs Les attributs : data-dismiss : fermeture de la fenêtre Exemple : ajout d'une fermeture sur le titre de la fenêtre On ajoute un pictogramme de fermeture sur l'entête <div class="modal-header"> <h4 class="modal-title" id="mymodallabel">titre de la fenêtre <button type="button" class="close pull-right" data-dismiss="modal" aria-hidden="true"> </button> </h4> </div> 189

17 Les fenêtres modales - Manipulation Les attributs : data-backdrop : contrôle du voile de la fenêtre principale, à true par défaut, on peut le déclare à false au niveau de la 1 section, contenant la classe fade <div class="modal fade" id="fenetre-modale" data-backdrop="false" tabindex="-1" role="dialog"... data-keyboard : utilisation de la touche echap pour fermer la fenêtre, par défaut à true, déclaré si besoin comme data-backdrop data-show : apparition de la fenêtre 190

18 Exercice Exo 07 Afficher en popover la fiche du film (exercice 02) à partir de la liste des vidéos (exercice 06 : 191