Ze Technology » Html http://www.ze-technology.com Ze Blog qui parle de Ze Technology. Univers du libre, programmation, société, business... Fri, 23 Jul 2010 20:21:38 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Tooltips faciles avec BoxOver http://www.ze-technology.com/2009/05/04/tooltips-faciles-avec-boxover/ http://www.ze-technology.com/2009/05/04/tooltips-faciles-avec-boxover/#comments Mon, 04 May 2009 10:29:00 +0000 Adrien Mogenet http://adrien.frenchcomp.net/blog/?p=18 Il peut être utile de proposer au sein d’une application web des petites bulles d’aides permettant de donner des indications à l’utilisateur, sans forcément surcharger inutilement la page. J’ai disposé quelques tooltips au sein de Piwam, pour venir expliquer le fonctionnement de certains champs de formulaire.


Il y a plein de manières de faire, avec du Javascript plus ou moins complexe, avec les frameworks / bibliothèques Ajax dernier cris… Mais la plupart du temps, inutile de se compliquer la vie.BoxOver fonctionne avec un seul fichier Javascript (12 ko) à inclure, et un poil de CSS. L’exploitation de BoxOver est on ne peut plus simpliste et se fait en HTML simple :

Pour afficher un point d’interrogation avec une bulle d’aide qui apparaît lorsque la souris passe dessus, cela nous donne :

<a href="#" title="header=[titre de la bulle d'aide] body=[le contenu de la bulle d'aide]">?</a>

Facile n’est-ce pas ? Ce choix fait suite à un essai d’une grande liste de solutions du genre. Je l’ai adopté et adapté pour en faire un helper sous symfony qui me permet de les disposer dans mes vues. BoxOver vous permet d’afficher des tooltips sur tout type d’élément. Le site de BoxOver.

]]> http://www.ze-technology.com/2009/05/04/tooltips-faciles-avec-boxover/feed/ 2