Sommaire

Les bulles d’aide PLUGINS JAVASCRIPT:Bulles d’aide

1. L’objectif

Dans vos sites Web vous pouvez afficher une courte définition sur un mot difficile par exemple et ceci au simple survol du visiteur.

Le fichier Bootstrap-08-JavaScript/01-tooltip.html détaille cet exemple.

2. Les bulles d’aide simples

Dans cet exemple, nous utiliserons les bulles d’aide simples, standard de Bootstrap. L’apparition de la bulle d’aide va se faire au survol d’un  mot et elle apparaîtra au-dessus du mot.

Voici le code utilisé :

<p>Morbi odio eros, volutpat ut pharetra vitae, <a href="#" class=
"mesbulles" data-toggle="tooltip" title="Voici une infobulle">lobortis</a>
sed nibh. Praeterea iter est quasdam res quas ex communi. Prima luce, cum
quibus mons aliud  consensu ab eo. Lorem ipsum dolor sit amet, consectetur
adipisici elit, sed eiusmod tempor <a href="#" class="mesbulles" 
data-toggle="tooltip" title="Une autre infobulle">incidunt</a> ut labore et 
dolore magna aliqua.</p> 
... 
<!-- Préconisation pour placer les liaisons aux scripts --> 
<script src="assets/js/jquery.js" type="text/javascript"></script> 
<script src="dist/js/bootstrap.min.js" type="text/javascript"></script> 
<!-- Appel au JavaScript ToolTip --> 
<script> 
$(document).ready(function(){ 
   $(’a.mesbulles’).mouseover(function(){ ...