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 :

Tester en ligne

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>

Tester en ligne

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>

Tester en ligne

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 :

Tester en ligne

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>

Tester en ligne

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>

Tester en ligne

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>

Tester en ligne

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.

Tester en ligne

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>">

Tester en ligne

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">

Tester en ligne

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.