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.

voir l’exemple

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>
Click to rate this post!
[Total: 7 Average: 3.3]

A propos jeanluc

Check Also

jQuery loader

Nous allons voir comment réaliser un plug-in loader (chargement) de page avec JavaScript et notamment …

3 Commentaires

  1. Merci pour ces explications!!!
    Bravo 🙂

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *