Faire un plugin de définition en Jquery

---

Je vous propose pour ce premier tutoriel de faire des infobulles en Jquery. Nous allons voir comment créer un plugin pour afficher des définitions dans vos paragraphes.

Ceci est un modèle ultra simple et très facile à implémenter. Cette infobulle va réagir comme l'attribut title d'une image ou d'un lien. Pourquoi s'embêter à en faire une en Jquery alors ? hé bien car celle-ci sera entièrement modifiable par CSS, ce qui n'est pas le cas de l'attribut title.

Pour commencer il faut taper un peu de code html, tout simple comme ceci :

Coucou je suis du HTML !

Dans ce paragraphe nous choisissons le mot à définir, ce sera HTML. je vais donc l'entourer d'un span à qui j'associerais la classe déclencheur. Ensuite afin de ne pas avoir à recréer un bloc en HTML je vais me servir de l'attribut name de la balise span, dans lequel je vais stocker ma définition.

Coucou je suis du <span class="declencheur" name="Hyper Text Mark up Language">HTML</span> !

Ensuite, nous allons coder la partie jquery du code. Pour ce faire nous mettons une fonction sur le survol du span declencheur, dans cette fonction nous récupérons la valeur de l'attribut name de la balise span survolé que nous stockons dans une variable. Cette fonction crée aussi une nouvelle balise span avec la classe definition qui contient notre variable précédemment stockée. Lorsque nous quittons le survol, le span avec la class definition est caché.

$(document).ready(function() {
    $('.declencheur').hover(function(){
        var def = $(this).attr('name');
        $(this).before('<span class="definition">'+def+'<span class="triangle"></span></span>');
    }, function() {
        $('.definition').fadeOut();
    });
});

Notre code HTML est notre script Jquery fonctionne (si ce n'est pas le cas, ce n'est pas de ma faute.) cependant il manque un peu de style ! À votre CSS ! Alors, afin de donner à ce script un petit peu plus de gueule, nous allons tout d'abord montrer qu'il se passe quelque chose sur le span declencheur comme le souligné et changer le curseur de survol puis rendre le span definition indépendant du texte en lui donnant une position absolute et le mettre en dispaly block, afin de mieux le positionner par rapport au mot à définir. Pour le reste c'est comme vous voulez. Voici mon CSS :

.declencheur
{
     color:#4D4D4D;
     border-bottom:1px dashed red;
     cursor:help;
}
 
.definition
{
    color:#4D4D4D;
    text-shadow:0px 1px #fff;
    background:#ccc;
    position:absolute;
    margin-top:-32px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    padding:5px;
}

C'est fini, voilà comment créer un plugin de définition en Jquery. J'espère que ceci vous sera utile et surtout qu'il vous donne des idées pour d'autres choses.

---

1 jquery, tutoriels