L’affichage d’une tooltip est l’un des besoins les plus récurrents pour un développeur Web. Le tooltip permet au développeur d’apporter une information supplémentaire à un élément de la page d’une manière esthétique et non intrusive.

Un tooltip pour quel besoin ?

Le tooltip permet d’afficher une information supplémentaire lors du survol d’une image, lors du passage sur le champs d’un formulaire. Il peut être associé à différents évènements sur n’importe quel élément d’une page, l’objectif étant de rendre la navigation plus claire et de déchargée la page d’informations superflues à un instant T.

Les solutions

De très nombreuses solutions de tooltip existent en Javascript. Comme je suis un grand fan de la bibliothèque jQuery, je vous propose de vous rendre sur cette page : http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/ qui donne un bon aperçu des Tooltip développés avec ce framework.

Ma solution préférée : jQuery Tools et son Tooltip.

Cette solution est très bien construite tout en restant légère (~5Ko). Il est possible de personnaliser l’animation de chargement de la tooltip, choisir sa position par rapport à l’élément déclencheur, y intégrer du texte mais aussi de l’HTML très simplement. Et tout le style est aisément modifiable dans la feuille CSS. Bref, que du bonheur !

Exemple de code

Le script :

<script type="text/javascript">
  $(document).ready(function() {
    $("#mon_image").tooltip({
      position: "center right",
      effect: "fade",
      opacity: 0.7,
      tip: '#tooltip'
    });
  });
</script>

Le code HTML :

<div id="tooltip">&amp;nbsp;</div> <img id="mon_image" title="Bahunet est un site de partage de cours génial !" src="http://www.bahunet.com/images/decoupe/logo.png" alt="logo Bahunet"  />

Et le CSS :

#tooltip {
  background-color: #000;
  border: 1px solid #fff;
  padding: 10px 15px;
  width: 200px;
  display: none;
  color: #fff;
  text-align:left;
  font-size:12px;
  box-shadow:0 0 10px #000;
  -moz-box-shadow:0 0 10px #000;
  -webkit-box-shadow:0 0 10px #000;
}

Je vous propose de consulter les différents exemples du site officiel et la documentation pour avoir plus d’informations et voir l’ensemble des possibilités offertes par ce plugin jQuery : http://flowplayer.org/tools/tooltip.html