Vous désirez personnaliser les infos bulles de vos pages web ?
Rien de plus simple, grâce au plugin qtip2 pour jquery.
Lorsque vous ajouté une propriété title a vos elements html <a href="#" title="Mon info bulle">Mon lien</a>, son contenu apparait a vos visiteurs lorsqu'ils placent leur curseur dessus.
C'est bien pratique, mais pas forcément adapté au style visuel de votre site.
Pourtant, vous allez voir avec quelle simplicité, nous pouvons créer de jolies infos bulles, comme celle que vous pouvez voir sur ce site.
Tout d'abord, il vous faudra, si ce n'est pas déjà fait, télécharger, et installer sur votre site le framework jQuery.
Ensuite, nous utiliserons le plugin qTip2.
La encore télécharger, et installer le plugin sur votre site.
Le site de qTip propose un "package" contenant jQuery et le Plugin, ideal si vous n'avez pas encore installer le framework jQuery.
Lorsque tout ceci est fait, il vous faudra simplement créer une instance qtip pour toutes les balises contenant une propriété title.
Pour cela, grace a jQuery, rien de plus simple !
Il vous suffit de créer l'instance qtip comme ceci :
[code]
$('[title]').qtip();
[/code]
Evidement, pour effectuer cette operation, nous devons attendre le chargement complet de la page. Pour cela, dans votre page, juste aprés les imports des scripts js de jQuery et qTip2, ajoutez ce morceau de code :
[code]
<script type="text/javascript">
$(document).ready(function() {
$('[title]').qtip();
});
</script>
[/code]
En consultant la doc disponible sur le site du projet qTip2, vous apprendrez a modifier les couleurs, la position, l'affichage, ...