Créer des infobulles CSS et JavaScript simplement avec jQuery

Kevin Liew

Traducteur

Didier Mouronval

C'est toujours une joie de comprendre comment les choses fonctionnent. Bon, en tout cas c'est mon cas. Alors cette fois-ci, je souhaite vous montrer comment créer des infobulles simples avec jQuery. Beaucoup de scripts que l'on pêche sur internet utilisent les événements onmouseover et onmouseout. Ça fait vraiment fouillis et ça me gêne. Et c'est là que jQuery arrive à la rescousse. La manière dont cela fonctionne est très simple : j'utilise les attributs rel et title des ancres pour identifier une infobulle et savoir ce qu'elle contient.

Cet article a été publié avec l'aimable autorisation de Kevin Liew.
L'article original peut être lu sur le site de Queness : Create a Simple CSS + Javascript Tooltip with jQuery.
Voir la démo | Télécharger l'exemple ♪

- Titre : Créer des infobulles CSS et JavaScript simplement avec jQuery

- Auteur : Kevin Liew

- Traducteur : Didier Mouronval

- Parution : 17 mai 2010

- Licence : Le contenu de cet article est rédigé par Kevin Liew et est mis à disposition selon les termes de la Licence Creative Commons Attribution 3.0 non transposé. Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright ® 2013 Developpez.com.

Sommaire

- I. Récupérer les coordonnées de la souris.

- II. Récupérer les ancres à traiter

- III. Astuce pour ne pas afficher le contenu de l'attribut title au survol

- IV. Le CSS

- V. Produit final

- VI. Remerciements

I - Récupérer les coordonnées de la souris.

Tout d'abord, j'ai fait une recherche sur Google et j'ai trouvé ce petit script sur ce blog que j'ai trouvé très utile. Cela montre comment récupérer les valeurs de l'abscisse X et de l'ordonnée Y de la souris.

$(document).ready(function(){
$().mousemove(function(e){
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
});

II - Récupérer les ancres à traiter

J'ai écrit un sélecteur simple pour récupérer uniquement les liens dont l'attribut rel vaut tooltip. J'utilise la même approche dans mon article Navigation List menu + jQuery Animate Effect. Il est très simple et facile :

$('a[rel=tooltip]').mouseover(function() {
......
});

En conséquence, les liens devant afficher une infobulle devront ressembler à :

<a rel="tooltip" title="Testing of tooltip">sentences</a>

III - Astuce pour ne pas afficher le contenu de l'attribut title au survol

Il y a un point important qu'il va falloir résoudre : la gestion native par les navigateurs de l'attribut title. Si vous utilisez l'attribut title sur une balise, au survol par la souris une infobulle apparait affichant le contenu de cet attribut. Nous voulons éviter cela. Une solution simple consiste à récupérer le texte au survol et à vider l'attribut. Après le survol, il suffit de remettre la valeur initiale. C'est simple et efficace. Vous pourrez voir comment le faire dans le code final.

IV - Le CSS

Enfin, les styles CSS. J'ai essayé de rendre l'infobulle facile à personnaliser. Vous pouvez utiliser vos propres styles dans le code suivant. La structure de l'infobulle comporte trois parties : un entête, un corps et un bas. Cela devrait rendre la personnalisation assez aisée.

#tooltip {
position:absolute;
z-index:9999;
color:#fff;
font-size:10px;
width:180px;
}

#tooltip .tipHeader {
height:8px;
background:url(images/tipHeader.gif) no-repeat;
}

/* IE hack */
*html #tooltip .tipHeader {margin-bottom:-6px;}

#tooltip .tipBody {
background-color:#000;
padding:5px 5px 5px 15px;
}

#tooltip .tipFooter {
height:8px;
background:url(images/tipFooter.gif) no-repeat;
}

V - Produit final

Nous avons tout vu. Il suffit maintenant de lier toutes ces techniques et vous aurez créé une infobulle très simple avec jQuery. Vous pouvez regarder la démo ou télécharger l'archive pour voir le fonctionnement et l'implémenter dans vos pages.

Voir la démo | Télécharger l'exemple

<!DOCTYPE html>
<html>
<head>
<title>Infobulles simples avec jQuery</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(document).ready(function() {

// Sélectionner tous les liens ayant l'attribut rel valant tooltip
$('a[rel=tooltip]').mouseover(function(e) {

// Récupérer la valeur de l'attribut title et l'assigner à une variable
var tip = $(this).attr('title');

// Supprimer la valeur de l'attribut title pour éviter l'infobulle native
$(this).attr('title','');

// Insérer notre infobulle avec son texte dans la page
$(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');

// Ajuster les coordonnées de l'infobulle
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );

// Faire apparaitre l'infobulle avec un effet fadeIn
$('#tooltip').fadeIn('500');
$('#tooltip').fadeTo('10',0.8);

}).mousemove(function(e) {

// Ajuster la position de l'infobulle au déplacement de la souris
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );

}).mouseout(function() {

// Réaffecter la valeur de l'attribut title
$(this).attr('title',$('.tipBody').html());

// Supprimer notre infobulle
$(this).children('div#tooltip').remove();

});

});

</script>

<style>
body {font-family:arial;font-size:12px;text-align:center;}
div#paragraph {width:300px;margin:0 auto;text-align:left}
a {color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}
a:hover {color:#000;text-decoration:none;}

/* Infobulle */

#tooltip {
position:absolute;
z-index:9999;
color:#fff;
font-size:10px;
width:180px;

}

#tooltip .tipHeader {
height:8px;
background:url(images/tipHeader.gif) no-repeat;
}

/* hack IE */
*html #tooltip .tipHeader {margin-bottom:-6px;}

#tooltip .tipBody {
background-color:#000;
padding:5px;
}

#tooltip .tipFooter {
height:8px;
background:url(images/tipFooter.gif) no-repeat;
}

</style>

</head>

<body>

<div id="paragraph">
A paragraph typically consists of a unifying main point, thought, or idea accompanied by supporting details. The non-fiction paragraph usually begins with the general and moves towards the more specific so as to advance an argument or point of view. Each <a rel="tooltip" title="A paragraph typically consists of a unifying main point, thought, or idea accompanied by <b>supporting details</b>">paragraph</a> builds on what came before and lays the ground for what comes next. Paragraphs generally range three to seven sentences all combined in a single paragraphed statement. In prose fiction successive details, for example; but it is just as common for the point of a prose paragraph to occur in the middle or the end. A paragraph can be as short as one word or run the length of multiple pages, and may consist of one or many <a rel="tooltip" title="Testing of Sentences">sentences</a>. When dialogue is being quoted in fiction, a new paragraph is used each time the person being quoted changed.
</div>

</body>
</html>

VI - Remerciements

Cet article a été publié avec l'aimable autorisation de Kevin Liew.
L'article original peut être lu sur le site de Queness : Create a Simple CSS + Javascript Tooltip with jQuery.