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