Des tooltips différents

Vous connaissez tous les tooltips qui vous affichent une information au survol d'un élément par la souris.

Ce que je vous propose ici est une alternative ouvrant de plus grandes perspectives. Comme le tooltip, ce tuto vous permet d'afficher une fenêtre d'information. Mais plus encore, vous pouvez placer dans cette fenêtre des images, des liens ou tout code HTML fonctionnel.

Contrairement au tooltip, cette fenêtre ne se ferme qu'avec une action du visiteur:

Si vous cliquez sur un élément de la boite comme un lien par exemple
Si vous cliquez à l'intérieur de la boite
Si une autre fenêtre de ce type s'ouvre

Avant d'entrer dans le vif du sujet, passez votre souris sur les exemples ci-dessous.

Le premier exemple ouvre une fenêtre avec un lien juste pour illustrer les possibilités

Le deuxieme exemple ouvre une simple fenêtre d'information

Le troisième vous affiche une image

Le dernier vous affiche un tableau

Comme vous avez pu le constater, vous pouvez pratiquement tout mettre dans ces boites !

Mise en place

Le javascript

Le moteur du fonctionnement est un javascript basé sur Mootools. Ce script est le suivant:

Pour le télécharger c'est ici

Ensuite vous faites un clic droit puis "Enregistrer sous". Stockez le parmi les fichiers de votre blog en lui donnant le nom tooltip.js

Dans un module simple HTML du menu, placez le code suivant en veillant bien à remplacer l'url par celle correspondant à l'emplacement du fichier

Le CSS

Vous pouvez définir le css pour la boite qui s'affiche ainsi que pour le texte survolé. Le code CSS du présent exemple est le suivant:

(à placer comme toujours dans apparence/Modifier le thème/Ajouter du css)

.mybox { position:fixed; display:none; background-color:black; border: 1px solid red; padding: 10px; border-radius:15px; opacity: 0.8; color: white; } .mytip {color:salmon; font-style:italic; font-weight:bold; text-decoration:underline; }

L'utilisation

Lorsque vous souhaitez utiliser cette boite, il vous suffit d'appliquer à l'élément choisi la classe mytip.

Exemple

On a:	on veut:	on écrira:
Parmi les langages du web ...	Parmi les langages du web...	Parmi les <span class="mytip" title="HTML<br/>CSS<br/>Javascript<br/>PHP<br/>..."> langages</span> du web...
En patagonie, on retrouve...	En Patagonie, on retrouve...	En <span class="mytip" title="<img style='width:200px;' src='http://data0.ek.la/le-blog-facile/perso/mootools%20exemples/patagonie_carte.jpg'> </img><br />Carte de Patagonie">Patagonie,</span> on retrouve...

Explication

Le fonctionnement du script est relativement simple: Il recherche tous les éléments de la classe .mytip et crée pour chacun d'entre eux une boite de classe .mybox dans laquelle il place le contenu de la propriété title des éléments .mytip

Les boites mybox sont placées au début des articles mais cachées grâce à la propriété display:none du CSS.

Le script affecte à chaque mytip une fonction réagissant au survol de la souris qui: cache toutes les boites affichées puis affiche la boite correspondant à l'élément survolé.