jQuery bulle

Nous allons créer une info bulle simple au survol d’un élément, ceci avec juste quelques lignes de code, nous utiliserons pour cet exemple la bibliothèque jQuery.

Dans la partie head de votre page :

<!-- chargement de jQuery library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- notre petit script -->
<script type="text/javascript">
$(function(){
    $(".mon-element").hover(function() {
		var $elt = $(this); // cibler l'élément
		$elt.css("cursor","pointer"); // ajouter le pointer au survol (facultatif)
		var $ma_bulle = $elt.find('.ma-bulle'); // cibler la div .ma-bulle
                $ma_bulle.fadeIn("slow"); // un fade pour faire apparaître la div .ma-bulle
    },function(){
		var $elt = $(this);
		var $ma_bulle = $elt.find('.ma-bulle');
                $ma_bulle.css("display","none");
    });
});
</script>

Notre allons styliser notre bulle positionnée en absolute par rapport à la div .mon-element,
pour changer l’emplacement ou la bulle apparait il suffit de modifier les propriétés associées à l’attribut absolute.

<style>
.mon-element {
	width: 200px;
	height: 200px;
	background-color: red;
	float: left;
	position: relative;
	margin-right: 10px
}
.ma-bulle {
	display: none;
	position: absolute;
	top: -105px;
	width: 198px;
	height: 100px;
	border: 1px solid #CCC;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.ma-bulle h4, .ma-bulle p {
	margin: 0px
}
.pad-5 {
	padding: 5px
}
</style>

et dans la partie body de votre page :

<div class="mon-element"> survolez moi !!!
  <div class="ma-bulle">
    <div class="pad-5">
      <h4>Contenu de ma bulle</h4>
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
    </div>
  </div>
</div>