Ceux d'entre vous qui ont d'ores et déjà adopté des bonnes pratiques en termes de référencement savent qu'il est important de remplir le champ titre lorsque l'on insère un lien. Celui n'est en effet pas visible des visiteurs, mais il apporte une information supplémentaire aux moteurs de recherche.

Pour autant, le contenu inséré dans ce champ titre mériterait bien souvent d'être visible aux yeux du visiteur. D'une part parce que malgré tout vous vous donnez la peine de le créer et qu'il est parfois frustrant de se dire que ca n'a d'effet que sur le référencement, d'autres part parce qu'il peut également apporter une information pertinente au lecteur sur la destination du lien que vous lui proposez, pour peu que ce titre soit un tout petit peu explicite.

Pour vous aider à valoriser ce contenu, je vous propose aujourd'hui d'intégrer un petit widget très léger à votre blog qui va vous permettre de créer des info-bulles élégantes au passage de la souris et reprenant ce contenu.

Pour ce faire, il va nous falloir faire appel à la désormais célèbre librairie jQuery, ainsi qu'à un plugin nommé TipTip. Nous allons donc une fois encore devoir mettre dans le gestionnaire de fichier le code source de ce plugin. Etant toujours aussi maniac du rangement (je n'ai pas changé depuis la semaine dernière :o)), je me suis replacé dans le dossier de mon blog dans mon Gestionnaire de Fichier, puis dans le dossier "sources" que j'avais déjà créé et que je vous invite à créer si ce n'est pas déjà fait.

J'ai créé un nouveau dossier nommé "tiptip" et me suis placé dedans. J'ai alors envoyé le fichier ci-dessous :

Téléchargement Jquery.tipTip.minified

Une fois le fichier à disposition, il ne me restait plus qu'à mettre en place l'appel à TipTip dans la rubrique Habillage > Contenu, en insérant un nouveau widget permettant d'inclure son propre HTML.

Je vais commencer par vous donner le code brut, puis je vais vous le décortiquer.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="sources/tiptip/jquery.tipTip.minified.js"></script>

<style>
/* TipTip CSS - Version 1.2 */

#tiptip_holder {
display: none;
position: abs
olute; top: 0;
left: 0;
z-index: 99999;
}

#tiptip_holder.tip_top {
padding-bottom: 5px;
}

#tiptip_holder.tip_bottom {
padding-top: 5px;
}

#tiptip_holder.tip_right {
padding-left: 5px;
}

#tiptip_holder.tip_left {
padding-right: 5px;
}

#tiptip_content {
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.92);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}

#tiptip_arrow, #tiptip_arrow_inner {
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
border-top-color: #fff;
border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
border-bottom-color: #fff;
border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
border-right-color: #fff;
border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
border-left-color: #fff;
border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
margin-top: -7px;
margin-left: -6px;
border-top-color: rgb(25,25,25);
border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
margin-top: -5px;
margin-left: -6px;
border-bottom-color: rgb(25,25,25);
border-bottom-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -5px;
border-right-color: rgb(25,25,25);
border-right-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -7px;
border-left-color: rgb(25,25,25);
border-left-color: rgba(25,25,25,0.92);
}

/* Webkit Hacks */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#tiptip_content {
padding: 4px 8px 5px 8px;
background-color: rgba(45,45,45,0.88);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
border-bottom-color: rgba(45,45,45,0.88);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
border-top-color: rgba(20,20,20,0.92);
}
}
</style>

<script>
$(document).ready(function(){
$(".entry-body a").addClass("tiptipelt");
$("p.entry-more-link a").removeClass();


$(function(){
$(".tiptipelt").tipTip();
});
});
</script>


Le code est un tout petit long, mais le principe est extrêmement simple.

Le premier élément <script src=""></script> permet de faire appel à jQuery. Si vous disposez déjà d'un plugin utilisant jQuery, il vous faudra retirer cet élément.

Le second fait appel au plugin TipTip que nous venons de mettre à disposition dans le Gestionnaire de Fichiers. Si vous avez suivi la même organisation que moi, vous ne devriez pas avoir à y toucher.

Le troisième élément, le plus long, correspond aux instructions de mise en forme de info-bulles. Cela va de <style> à </style>.

Enfin, nous arrivons au vif du sujet, le dernier bout de script correspond à la machinerie permettant de faire s'afficher les info-bulles. Elle dit, ligne par ligne :

1. dès que le document a fini de se charger,
2. parcourir tous les liens contenus dans les éléments dont la classe est "entry-body", ce qui correspond au contenu des notes, et leur ajouter la classe "tiptipelt",
3. retirer la classe "tiptipelt" des liens qui sont des liens de césure d'article invitant à lire la suite,
4. puis appel à la fonction de création des info-bulles .tiptip(), uniquement sur les éléments du site dont la classe est "tiptipelt".

On a ainsi isolé les liens contenus dans les articles de tous les autres liens du blog, et on leur a appliqué nos info-bulles.

Facile non ? ;o)