• L
• M
• M
• J
• V
• S
• D

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 8
• 9
• 10
• 11
• 12
• 13
• 14

• 15
• 16
• 17
• 18
• 19
• 20
• 21

• 22
• 23
• 24
• 25
• 26
• 27
• 28

• 29
• 30

• Accueil
• News
• Liens
• Téléchargement
• Publicités & partenaires

• HTML, CSS et PHP

• Design île Avalon
• Effet ToolTip

• Art & photo

• Peinture sur figurines

• Wargames

• Warhammer 40.000

• Jeux vidéos & MMORPG

• Multiboxing
• Star Citizen
• World of Warcraft
• Tabula Rasa
• The Witcher

Effet "Tooltip"

Vous allez me dire :

Mais qu'est ce donc un "Effet Tooltip" ?

Et bien un effet tooltip est une boîte de commentaire qui va s'afficher lorsque votre souris viendra survoler un lien ou une image. Par exemple si vous survolez le lien ci-contre vous aurez un effet tooltip : Survolez-moiC'est magique, voici un texte qui s'affiche au survol de votre souris....

L'effet en lui-même peut être très simple et ne contenir que du texte, ou au contraire être des plus compliqué avec une mise en page bien spécifique et éventuellement l'insertion d'une image. Par exemple, un effet tooltip bien connu des joueurs de World of Warcraft est le "wowloot", un effet qui vient afficher la description d'une pièce d'équipement telle qu'on peut la voir au sein même du jeu, exemple : Epée cristalforgéeEpée cristalforgée
Lié quand équipé
EpéeMain droite
Vitesse 1,80Dégâts : 35 - 114
(41,4 dégâts par seconde)
+30 Endurance
+8 Intelligence
Niveau 70 requis
Equipé : Augmente de 11 le score de blocage.
Equipé : Augmente les dégâts et les soins produits par les sorts et effets magiques de 121 au maximum.. Vous pourrez voir cette effet sur de nombreux sites dont la rubrique WoW de ile-avalon ou le site de Judgehype.

Comment procéder ?

Il existe plusieurs façon de mettre en place un effet de tooltip sur un site, une de ces méthodes est basée sur l'utilisation de fonctions Javascript, une autre est entièrement en feuille de style (CSS). N'étant pas fan du Javascript du fait que le visiteur d'un site peut le désactiver, ma préférence va donc vers la méthode CSS et c'est donc de cette méthode qu'il va être question dans cet article...

Le code à insérer dans une page

Chose peut commune, on va commencer par la fin. Voici le code que vous devez intégrer dans votre page HTML afin qu'un lien se transforme en un Tooltip :

Analysons maintenant le source ci-dessus :

• Une balise <a href=""> associée à la classe "tooltip". C'est cette classe qui va générer l'effet désiré. La baliser HREF fonctionne normalement, vous pouvez y associer un véritable lien et non le #, vous pouvez y associer une image plutôt qu'un texte.
• Une balise <em> qui contiendra toute la partie "cachée" qui ne s'affiche qu'au moment du survol du lien. Si, comme pour l'effet wowloot, vous voulez intégrer des effets de style, des images, des liens, etc. au sein même de la section survolée, vous le pouvez.

La feuille CSS

Le code qui suit peut être inséré au sein de votre balise d'entête (HEAD) ou importé :

On associé la propriété display:none à la balise EM afin qu'elle soit masquée dans sont état normal. Et on lui associé la propriété display:block lors du survol de la balise HREF. Ces deux instructions suffisent pour créer l'effet de survol, reste ensuite à définir les propriétés de mise en page et de positionnement.

L'objet EM est en positionnement absolute, notez qu'il faudra associer le positionnement relative au tag HREF afin que le tag EM se positionne bien par rapport à son parent HREF.

Les propriété top et left vont placer l'objet. Notez que suivant si vous voulez que l'objet se place sous le lien ou au dessus, à gauche ou à droite, il vous faudra définir respectivement les propriétés top, bottom, right ou left. Il n'est pas utile de toutes les définir, deux suffisent.

Il est important de définir une largeur à votre objet (width).

Enfin, les propriétés de padding, border et background sont purement esthétique.

Avec le source ci-dessus vous avez le principal pour mettre en place un effet de tooltip, mais on peut aller plus loin...

Une "flèche"

Il peut être des plus esthétique d'ajouter une petite flèche sur notre tooltip et qui va pointer sur le lien.

Pour cela, il nous faut une image :

Ensuite il nous faut une instruction HTML pour l'insérer au sein de notre tooltip. On va utiliser le tag SPAN que l'on intégrer comme ci-dessous :

Puis vient la source CSS correspondant à notre SPAN :

Le positionnement est en absolute et se fait par rapport à la balise EM. Les propriétés top, left, bottom et right vous nous permettre de placer l'image au sein de la tooltip. Ces propriétés vont dépendre de l'image en elle-même et de la tooltip, il vous faudra donc chercher un peu :)

Les propriétés height et width définissent la taille de l'image. C'est important sinon elle risque d'être tronquée voir de ne pas s'afficher.

Enfin, la propriété background affiche l'image.

Une notion d'écartement entre le tooltip et son lien

Voici une notion qui peut s'avérer utile de connaître : Lorsque la souris survole le lien, le tooltip s'affiche. Ensuite, si on passe la souris sur le Tooltip lui-même il reste affiché. Pourtant, il se peut que cela ne soit pas toujours le cas. Pourquoi ?

Et bien c'est du à un écart qui se trouve entre le tooltip et son lien. Cet écart peut être créé quand on positionne le tooltip.

En quoi cela peut être une gène ?

La gène vient principalement du fait que si l'on veut intégrer des liens dans notre Tooltip comme sur cet exemple : Survolez-moiUne liste de liens :

• Lien N°1
• Lien N°2
• Lien N°3

Il n'y a pas de solution miracle pour éviter cet écart, soit le visiteur est rapide et accède au Tooltip avant qu'il ne disparaisse (Mouai...), soit vous faite en sorte que cet écart soit réduit à zéro évitant alors tout problème.

Si vous rencontrez ce problème et que vous ne pouvez pas le solutionner simplement, il y a malgré tout une astuce. Cette astuce consiste à exploiter le principe du pointeur (Cf. Une "flèche"), soit, si vous l'utilisez déjà, en augmentant sa largeur afin qu'il recouvre la zone d'espacement, soit en lui attribuant un pixel transparent et en le dupliquant sur toute la surface de la zone d'espacement. Ainsi le pointeur aura pour effet de cacher la zone d'espace et d'éviter tout problème.

Compatibilité avec les navigateurs, et la Tooltip "sort du site"

Dès lors, vous savez créer une Tooltip en CSS et vous pouvez maintenant utiliser ce code afin de l'adapter à votre site.

Malgré tout, il subsiste encore quelques petites choses à savoir...

Le premier point n'est autre que la compatibilité de votre Tooltip avec des navigateurs d'ancienne génération. Une telle Tooltip fonctionne très bien avec Firefox, IE6 et plus, mais peut rencontrer des problème avec des navigateurs plus anciens. Donc si vous craignez de rencontrer des problèmes de compatibilité je vous recommande d'opter pour la solution Javascrip et non CSS, mais dites-vous que de nos jour les navigateurs plus ancien qu'IE6 et Firefox se font de plus en plus rares...

Le second point est que notre Tooltip ne prend pas en compte son positionnement par rapport au texte où il se trouve. Il y a donc un risque de voir la Tooltip sortir de la page, se qui aura bien évidemment pour effet de la rendre illisible. Là encore on peu gérer ce problème avec Javascript, mais dans le cadre du CSS il faut passer par une astuce qui consiste à surcharger notre classe "Tooltip" avec une classe de positionnement.

Surcharge par classe de positionnement

Du côté du HTML, cela se présente ainsi :

Et niveau CSS on obtient ceci :

Ainsi, si vous ne surchargez pas votre classe "Tooltip" cette dernière gardera l'alignement par défaut définit dans la classe elle-même, par contre si vous la surchargez alors l'alignement par défaut sera remplacé par le nouvelle alignement définit dans les classes GAUCHE et DROITE. Se sera à vous ensuite d'associer la classe d'alignement qui va bien au moment de l'insertion de votre Tooltip dans un texte.

Notez que si vous associez un pointeur à l'aide d'un SPAN à votre Tooltip, il vous faudra gérer son positionnement dans les différent cas d'alignement sur la gauche ou la droite...

Notez aussi que j'ai évoquez ce problème pour le cas où votre tooltip vienne à déborder sur la gauche ou la droite, mais le problème existe aussi pour un débordement en haut ou en bas du site.

Aller plus loin encore...

Maintenant que vous savez comment créer un effet de tooltip, quelles peuvent être les possibilités d'un tel effet ?

Car après tout rien de vous empêche de le détourner pour l'utiliser autrement...

Voici quelques exemples d'effet Tooltip :

• Un calendrier avec les évènements important qui s'affichent quand on survole un jour précis.
  Notez que cet effet est présent sur le calendrier d'ile-avalon.
• Un menu déroulant.
• Une image qui s'affiche au survole d'un lien.
• Et plus encore...

Within Temptation