Bootstrap 4 : info-bulles (Tooltips) et Popovers
Une info-bulle (Tooltip) est une information textuelle sommaire qui apparaît dans une bulle lorsqu’on survole ou clique un élément de la page. Un Popover peut être considéré comme une grosse info-bulle avec plus de possibilités. Ces deux plugins font appel à une librairie externe pour le positionnement, en l’occurrence popper.
Principes communs
Ces plugins nécessitent la librairie popper.js (ou la version bundle de Bootstrap).
D’autre part, contrairement à ce qu’on a vu jusqu’à présent, il faut systématiquement initialiser ces plugins avec jQuery. Le plus simple est de faire un tir groupé avec toutes les info-bulles et popovers présents sur la page :
$(function () {
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
})
Le principe
Info-bulle (tooltip)
Pour mettre en place une info-bulle il faut :
- l’attribut data-toggle= »tooltip »,
- l’attribut title pour définir le texte de l’info-bulle,
- optionnellement l’attribut data-placement avec comme valeurs possibles top, right ,bottom et left pour déterminer l’emplacement. Si cet attribut est absent la valeur par défaut est top.
Ce qu’on peut schématiser ainsi :
Popover
Pour mettre en place un Popover il faut :
- l’attribut data-toggle= »popover »,
- l’attribut data-content pour définir le contenu,
- optionnellement l’attribut data-placement avec comme valeurs possibles top, right, et left pour déterminer l’emplacement. Si cet attribut est absent la valeur par défaut est right,
- optionnellement l’attribut data-container pour éviter de perturber le contenu du Popover avec du style d’un élément englobant.
Ce qu’on peut schématiser ainsi :
Un exemple
Info-bulle (tooltip)
Considérez ce code :
<p>Le Tigre (Panthera tigris) est un <a data-toggle="tooltip" data-placement="bottom" title="Classe de vertébrés">mammifère</a> carnivore de la famille des félidés (Felidae) du genre Panthera. Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands <a data-toggle="tooltip" data-placement="top" title="Synonyme de carnassier"> carnivores</a> du monde.</p>
...
<script>
$(function () {
$('a').tooltip()
})
</script>
Ce qui affiche ce texte :
Comme il est prévu deux info-bulles, si on passe le curseur de la souris au-dessus des deux liens on déclenche l’apparition de ces info-bulles :
Une info-bulle positionnée en bas :
Une info-bulle positionnée en haut :
On pourrait se passer de l’attribut data-placement= »top » pour la deuxième info-bulle puisque c’est la valeur par défaut.
Popover
Considérez ce code :
<a href="#" class="btn btn-info" data-toggle="popover" data-content="C'est tout simple à faire !">Cliquez sur moi pour le popover</a>
...
<script>
$(function () {
$('a').popover()
})
</script>
Il est possible d’ajouter un titre avec l’attribut title et de modifier la position avec l’attribut data-placement :
<a href="#" class="btn btn-info" data-toggle="popover" data-placement ="bottom" data-content="C'est tout simple à faire !" title="Je suis le titre">Cliquez sur moi pour le popover</a>
Positionnement avec JQuery
On peut obtenir le même positionnement avec jQuery plutôt que par l’attribut data-placement, voici un exemple avec des info-bulles (le code est identique pour les Popovers) :
<p>Le Tigre (Panthera tigris) est un <a href="#" data-toggle="tooltip" title="Classe de vertébrés">mammifère</a> carnivore de la famille des félidés (Felidae) du genre Panthera. Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands <a href="#" data-toggle="tooltip" title="Synonyme de carnassier"> carnivores</a> du monde.</p>
...
<script>
$(function () {
$('a:first-child').tooltip({ placement:'bottom' })
$('a:last-child').tooltip({ placement:'top' })
})
</script>
Mais évidemment dans ce cas il faut différencier les info-bulles au niveau du Javascript, ce qui ne présente pas vraiment d’intérêt dans cet exemple.
Déclenchement
Info-bulle
Par défaut une info-bulle est déclenchée lorsque le curseur de la souris survole l’élément concerné ou si celui-ci a le focus. On peut modifier ce comportement avec l’option trigger. Les possibilités sont click, hover, focus et manual. Voici un exemple d’utilisation avec le même code HTML :
$(function (){
$('a:first-child').tooltip({ placement: 'left', trigger:'click' })
$('a:last-child').tooltip({ placement: 'right', trigger:'click focus' })
})
Maintenant la première info-bulle se déclenche seulement avec un clic et est positionnée à gauche :
La seconde info-bulle est positionnée à droite et est activée par clic et tant qu’on a le focus :
En cas d’apparition avec seulement un clic il faut un autre clic pour la disparition.
Popover
Pour un popover le comportement par défaut est un déclenchement sur un clic. Mais on dispose comme pour l’info-bulle des 4 possibilités : click, hover, focus et manual.
Voici un l’exemple vu ci-dessus mais cette fois on désactive le clic du bouton et on déclenche le popover au survol avec l’attribut data-trigger :
<a href="#" class="btn btn-info" data-toggle="popover" data-trigger="hover" data-placement ="bottom" data-content="C'est tout simple à faire !" title="Je suis le titre">Passez sur moi pour le popover</a>
Par défaut pour refermer le popover dans le cas classique d’un déclenchement par un clic il faut recliquer. Si on veut une fermeture sur un clic ailleurs sur la page il faut utiliser l’option trigger avec la valeur focus :
<a href="#" class="btn btn-info" data-toggle="popover" data-trigger="focus" data-placement ="top" data-content="C'est tout simple à faire !" title="Je suis le titre">Passez sur moi pour le popover</a>
Avec l’option manual on peut définir une action quelconque pour déclencher le popover que l’on veut (c’est aussi applicable à une info-bulle). Regardez cet exemple :
<img class="ml-5" data-toggle="popover" data-offset="20, -15" data-content="Je suis en colère !" title="Attention à vous !" src="images/visage.png">
<a href="#" id="pop" class="btn btn-info" >Cliquer sur moi plusieurs fois pour le popover</a>
...
<script>
$(function () {
$('img').popover({trigger:'manual'})
$('a').click(function() {
$('img').popover('toggle')
})
})
</script>
On initialise le popover sur l’image en déclenchement manuel :
$('img').popover({trigger:'manual'})
On utilise l’événement click du bouton pour lancer la fonction popover avec toggle comme paramètre :
$('img').popover('toggle')
J’ai introduit un décalage pour approcher la bulle de la bouche du personnage, j’explique ce point un peu plus loin dans ce chapitre.
Délai de déclenchement
Par défaut une info-bulle (c’est identique pour un popover) s’affiche immédiatement et disparaît avec la même célérité. On peut modifier ce comportement avec l’option delay. On peut soit définir un délai identique pour l’apparition et la disparition, soit différencier les deux. Voici un exemple d’utilisation avec le même code HTML :
$(function (){
$('a:first-child').tooltip({ delay: 400 })
$('a:last-child').tooltip({ delay: { show: 400, hide: 200 } })
});
Ici on utilise l’option delay en la définissant à 400 ms pour le premier lien pour l’affichage et la disparition. On différencie avec 400 ms pour l’affichage et 200 ms pour la disparition pour le second.
On peut aussi affecter la valeur avec un attribut :
<a data-toggle="tooltip" data-delay="400" title="Classe de vertébrés">
Contenu avec HTML
Par défaut le titre d’une info-bulle (et le contenu du popover) accepte uniquement du texte. Regardez cet exemple :
<p>Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera. Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands <a href="#" data-toggle="tooltip" title="<strong>Synonyme de carnassier</strong>"> carnivores</a> du monde.</p>
Je comptais afficher le titre en gras mais c’est raté, pour que ça fonctionne il faut que j’affecte la valeur true à l’option html :
<a data-toggle="tooltip" data-html="true" title="<strong>Synonyme de carnassier</strong>">
Décalage
On a vu qu’une info-bulle (c’est identique pour un popover) se positionne automatiquement par rapport à l’élément. Notre seule latitude est de choisir la position (haut, bas, gauche ou droite). Mais on peut aussi décaler cette position en jouant à la fois sur l’abscisse et l’ordonnée. Voici notre exemple de base sans décalage :
<p>Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera. Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands <a href="#" data-toggle="tooltip" title="Synonyme de carnassier"> carnivores</a> du monde.</p>
On va maintenant faire un décalage en utilisant l’option offset :
<a href="#" data-toggle="tooltip" data-offset="-20px, -1px" title="Synonyme de carnassier">
Vous pouvez ainsi positionner avec précision une info-bulle.
Les événements
Vous disposez de ces 4 principaux événements pour ces deux plugins (pour le popover il suffit de remplacer le nom tooltip) :
| Tooltips | Popovers | Description |
| show.bs.tooltip | show.bs.popover | Déclenché dès l’appel à la méthode show |
| shown.bs.tooltip | shown.bs.popover | Déclenché quand la bulle est devenue visible |
| hide.bs.tooltip | hide.bs.popover | Déclenché dès l’appel à la méthode hide |
| hidden.bs.tooltip | hidden.bs.popover | Déclenché quand la bulle est devenue invisible |
Si vous avez besoin de l’un de ces événements la syntaxe est celle-ci :
$('#pop').on('show.bs.popover', function () {
// Action
})
En résumé
- Les info-bulles permettent de faire apparaître un petit texte informatif pour un élément, les popovers également mais autorisent un contenu plus riche.
- On peut positionner précisément une info-bulle ou un popover.
- On peut déclencher une info-bulle ou un popover au clic, au survol, a focus, ou avec n’importe quel événement.
- On peut imposer des délais à l’affichage ou à la disparition d’une info-bulle ou d’un popover.
- On peut mettre du HTML dans une info-bulle ou un popover.
