ValmeTips: infobulle cliquable.

Présentation

J’ai créé ce système d’info bulle car tout ceux que j’ai trouvé à l’époque avait un gros défaut: ils ne proposaient pas l’option cliquable.

Ce code a été créé avec l’aide des membres du forum JeuWeb.org.

Installation:

Pour commencer, téléchargez la classe jQuery. Ensuite installez-la sur vos pages web.

Utilisation:

Cette classe ajoute 4 fonctions:

  • over_tips(message, title)
  • click_tips(message, title)
  • cache_tips()
  • unclick_tips()

over_tips est la fonction à déclencher sur un onmouseover, elle affiche l’info bulle.

click_tips fonctionne sur un onclick et empêche que l’infobulle disparaisse.

cache_tips s’utilise sur un onmouseout et sert a cacher la div. Attention que cette fonction est sans effet sur une click_tips.

unclick_tips sert à fermer une click_tips. Cette fonction s’exécute automatiquement si un over_tips est lancé ou si l’on sort du périmètre d’une click_tips.

Pour être totalement opérationnel, il faut ajouter ce code qui va détecter la position de la souris dans la page:

  1. $(document).ready(function (){
  2.      $(window).mousemove(function (e){
  3.          sourisLeft = e.pageX;
  4.          sourisTop = e.pageY;
  5.      });
  6. });

Utilisez le système de detection du footer:

Tel quel, votre info bulle risque de provoquer un « allongement du footer » si un élément est placé trop bas. Ce sera alors difficile de lire votre info bulle. J’ai intégré un système qui prévient ce genre de problème, il suffit d’ajouter une class footer (sur le footer de votre site bien sûr) pour l’activer.

Démo

Laissez un commentaire