div

Les info-bulles
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.
apparaît
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
l attribut title.
title
Pour initialiser le tooltip, on utilise la fonction tooltip() de l’API JavaScript de Bootstrap
3.
Il convient de programmer l'apparition du tooltip via Jquery
ou d'initialiser la fonction tooltip()
plug-in
p() via JQueryy et d'utiliser le p
g bootstrap
p tootip.js
pj
175
Tooltip - Exemple
901 tooltips html
901_tooltips.html
<div class="container">
<p>Denique Antiochensis ordinis
<a href="#" class="tooltip-test" data-toggle="tooltip" title="Ceci
est une infobulle!
infobulle!">vertices
>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="#"
h f # class="tooltip-test"
l
l i
d
data-toggle="tooltip"
l
l i
title="Une
i l
autre infobulle.">restitisset</a>.
Denique Antiochensis ordinis vertices sub uno elogio iussit occidi
<a href="#"
e
# c
class="tooltip-test"
ass too t p test data-toggle="tooltip"
data togg e too t p t
title="Et
t e
t u
une
e
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
fi
constantia
i restitisset.
i i
</p>
<script>
$(document).ready(function
$(
)
y(
() {
$('a.tooltip-test').mouseover(function () {
$(this).tooltip('show');
});
Lorsque
q les liens de classe tooltip-test
p
sont survolés p
par
})
});
la souris, on affiche l'infobulle
</script>
On gére l'apparition via JQuery
176 </div>
Tooltip - Exemple
901 tooltips html
901_tooltips.html
177
Manipulation des tooltips
La fonction tooltip() possèdent des attributs permettant sa manipulation :
Position : data-placement
178
Valeur
Position
data-placement="bottom"
En bas
data-placement="top"
En haut
data-placement="right"
À droite
data-placement="left"
data
placement left
À gauche
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
effet, il convient de donner la valeur "false"
false à ll’attribut
attribut "data
dataanimation" , exemple :
<a href="#" data-toggle="tooltip" data-animation="false"
title="Ceci
title
Ceci est une infobulle!
infobulle!">vertices
>vertices sub</a>
Attribut "data-html" : p
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
t t renseigné
texte
i é dans
d
"d
"data-title"
t titl " estt affiché
ffi hé d
dans l’i
l’infobulle
f b ll
179
Manipulation des tooltips – autres attributs
902 tooltipsEvent html
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"
hover , "click"
click , "focus"
focus et "manual"
manual .
Exemple :
Le code ci-dessous , permet d’afficher une infobulle suite aux événements "hover"
et "click"
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
i t src="js/tooltip.js"></script>
"j /t lti j " /
i t
<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
focus, script d'initialisation
d initialisation :
180
<script>
$(document).ready(function(){
$(' tooltip test') tooltip();
$('.tooltip-test').tooltip();
});
</script>
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 :
181
Option
Description
HTML
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".
content
Cette option
p
p
permet de décrire le corps
p de l’infobulle. Nous p
pouvons y insérer
l’ensemble des balises mises à disposition par le HTML5.
title
La valeur de "title" permet d’afficher le contenu de l’en-tête du popover.
Les popovers – Exemple avec JQuery
903 popovers html
903_popovers.html
<div class="container">
<p>Denique Antiochensis ordinis
<a href="#" class="popover-test" data-toggle="popover"
data content "Contenu de notre popover."
data-content="Contenu
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');
$(this).popover('show');
});
$('a.popover-test').mouseout(function () {
$(this).popover('hide');
});
Apparition et disparition gérée
});
manuellement par JQuery
</script>
</div>
182
Les popovers – Exemple avec data-trigger
904 popovers02 html
904_popovers02.html
<div class="container">
<p>Denique Antiochensis ordinis
<a href="#"
class "popover test"
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();
});
I iti li ti éévènements
Initialisation,
è
t gérés
é é par
</script>
data-trigger
</div>
183
Les popovers – Autre exemple
905 popovers03 html
905_popovers03.html
184
Les fenêtres modales
Fenêtres modales :
Utilisées dans le cadre d'info bulles complexes ou de formulaires
Elles sont composées :
d'un
d
un entête
d'un corps
d'un pied de fenêtre
Exemple :
Apparition d'une fenêtre modale à partir d'un bouton
<button class="btn"
data-toggle="modal" data-target="#id-fenetre-modale">
//texte du bouton
/b tt
</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
Les fenêtres modales
La fenêtre :
Première section :
Contient 4 attributs obligatoires :
tabindex="-1"
tabindex=
-1 , role=
role="dialog"
dialog , aria-labelledby=
aria-labelledby="myModalLabel"
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
dt
auto
600 px
p
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
Les fenêtres modales
906 FenetreModale html
906_FenetreModale.html
<div class="container">
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#fenetre-modale">
Bouton d'appel
d appel
Afficher
ffi h
l
la f
fenêtre
ê
modale
d l
</button>
<div class="modal fade" id="fenetre-modale" tabindex="-1"
role="dialog"
g aria-labelledby="myModalLabel"
y
y
1°SS. la fenêtre
1
aria-hidden="true">
2°S. position
<div class="modal-dialog">
<div class="modal-content">
3°S. contenu
<div
di class="modal-header">
l
" d l h d "
<h4 class="modal-title" id="myModalLabel">
4°S. entête
Titre de la fenêtre</h4>
</div>
/
<div class="modal-body">
<p class="lead"><img src="chrome_logo_2x.png" ...
5°S. corps
</div>
<div
di class="modal-footer">
l
" d l f t "
<a href="https://www.google.fr/chrome/browser/desktop/"
class="btn btn-primary pull-right">Voir le Site</a>
6°S. pied
/
</div>
...
187
Les fenêtres modales
906 FenetreModale html
906_FenetreModale.html
188
Les fenêtres modales – Manipulation des attributs
Les attributs :
data-dismiss : fermeture de la fenêtre
Exemple : ajout d'une
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">&times;</button>
</h4>
</div>
189
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°
1 section , contenant la classe fade
<div class="modal fade" id="fenetre-modale" data-backdrop="false"
tabindex="-1"
tabindex=
1 role=
role="dialog"
dialog ...
data-keyboard
y
: utilisation de la touche echap
pp
pour fermer la fenêtre,, par
p défaut à
true, déclaré si besoin comme data-backdrop
data-show : apparition de la fenêtre
190
Exercice – Exo 07
Afficher en popover la fiche du film (exercice 02) à partir de la liste des vidéos
(exercice 06 :
191