Des tooltips ou info-bulles en css3 : 3 méthodes simples

Les Tooltips ou info-bulles sont de petites bulles informatives qui apparaissent au passage de la souris sur des liens ou des images. En plus d’être très esthétiques, les tooltips sont aussi utiles pour informer l’utilisateur sans surcharger la page de texte informatif.

Il existe une multitude de techniques pour réaliser des info-bulles, certaines utilisant JavaScript ou d’autres méthodes plus ou moins complexes. Dans cet article, nous nous concentrerons sur des tooltips réalisés uniquement en CSS3.

Sommaire :

1. Utilisation de l’attribut « title » dans le lien.

2. Utilisation d’une balise « span ».(le plus simple)

3. D’autres méthodes toutes faites.

infobulles

1. Utilisation de l’attribut « title » dans le lien.

La première idée qui vient à l’esprit pour créer une infobulle est d’utiliser l’attribut title des balises <a> ou <img>. Prenons l’exemple ci-dessous :

[pastacode lang= »markup » manual= »%3Ca%20title%3D%22Exemple%20de%20tooltips%22%3EInfo-bulle%3C%2Fa%3E » message= »L’info-bulle de base » highlight= » » provider= »manual »/]

L’infobulle qui apparaît au passage de la souris est très simple, mais aussi très moche. On est donc tenté de d’utiliser la pseudo-classe hover, pour styliser l’attribut « titre ». Voici un exemple de tooltip mettant à profit cette pseudo-classe :

Code HTML

[pastacode lang= »markup » manual= »%3Ca%20href%3D%22%22%20title%3D%22L’info-bulle%20%2B%20son%20double%22%20class%3D%22tooltip%22%3ETooltip%20stylis%C3%A9%20avec%20CSS3%20%2B%20infobulle%20par%20d%C3%A9faut%3C%2Fa%3E%0A » message= »Linfo-bulle double » highlight= » » provider= »manual »/]

Le code CSS3 ci-dessous. La partie du css avec « div » est une astuce pour afficher le petit triangle en dessous de la bulle.

[pastacode lang= »css » manual= ».tooltip%7B%0Adisplay%3A%20inline%3B%0Aposition%3A%20relative%3B%0A%7D%0A.tooltip%3Ahover%3Aafter%7B%0Abackground%3A%20%23333%3B%0Abackground%3A%20rgba(0%2C0%2C0%2C.8)%3B%0Aborder-radius%3A%205px%3B%0Abottom%3A%2026px%3B%0Acolor%3A%20%23fff%3B%0Acontent%3A%20attr(title)%3B%0Aleft%3A%2020%25%3B%0Apadding%3A%205px%2015px%3B%0Aposition%3A%20absolute%3B%0Az-index%3A%2098%3B%0Awidth%3A%20220px%3B%0A%7D%0A.tooltip%3Ahover%3Abefore%7B%0Aborder%3A%20solid%3B%0Aborder-color%3A%20%23333%20transparent%3B%0Aborder-width%3A%206px%206px%200%206px%3B%0Abottom%3A%2020px%3B%0Acontent%3A%20%22%22%3B%0Aleft%3A%2050%25%3B%0Aposition%3A%20absolute%3B%0Az-index%3A%2099%3B%0A%7D%0Adiv%20%7B%0Aborder%3A%20solid%3B%0Aborder-color%3A%20%23333%20transparent%3B%0Aborder-width%3A%206px%206px%200%206px%3B%0Awidth%3A%200px%3B%0A%7D » message= »CSS de l’info-bulle » highlight= » » provider= »manual »/]

Le problème de cette méthode, c’est que l’info-bulle de base s’affiche en même temps que l’info-bulle que l’on vient de créer. Pour faire disparaître cette infobulle disgracieuse supplémentaire, il faut utiliser un second attibut « title », par exemple dans une balise <span>, mais celui-ci sera vide.

Voici les nouvelles balises HTML à utiliser :

[pastacode lang= »markup » manual= »%3Ca%20href%3D%22%22%20title%3D%22L’info-bulle%20finale%22%20class%3D%22tooltip%22%3E%3Cspan%20title%3D%22%22%3ETooltip%20CSS3%20final%3C%2Fspan%3E%3C%2Fa%3E%0A » message= »L’info-bulle finale » highlight= » » provider= »manual »/]

voici le résultat :

Pour enregistrer le code sur une autre page cliquez ici

 

2. Utilisation d’une balise « span ».

La méthode est intéressante, mais on peut se poser la question de savoir s’il est intéressant d’utiliser l’attribut « title », puisque par la suite, on cherche à l’éliminer avec une balise <span>.

La seconde idée sera donc de ne pas utiliser l’attribut « title », mais de styliser directement une balise span dans le lien à infobulle.

Avec la propriété display:none; on cache la balise span, puis on la fait apparaître au passage sur le lien avec a:hover span{ display:block; }.

Voici le code du lien du tooltips :

[pastacode lang= »markup » manual= »%3Ca%20href%3D%22%22%3EUn%20tooltip%20gris%3Cspan%3EInfo-bulle%20gris%3C%2Fspan%3E%3C%2Fa%3E%0A » message= »Lien info-bulle avec span » highlight= » » provider= »manual »/]

Le code CSS3 pour faire apparaître et disparaître l’info-bulle :

[pastacode lang= »css » manual= »a%20span%7B%09%0A%09display%3Anone%3B%0A%09color%3A%23fff%3B%0A%09background%3Argba(51%2C51%2C51%2C0.75)%3B%0A%09padding%3A20px%3B%0A%09border-radius%3A4px%3B%0A%09-moz-border-radius%3A4px%3B%0A%09-webkit-border-radius%3A4px%3B%0A%09width%3A100px%3B%0A%09text-align%3Acenter%3B%0A%09position%3A%20absolute%3B%0A%09z-index%3A10%3B%0A%7D%0Aa%20%7B%20%0A%09display%3A%20inline-block%3B%0A%7D%0Aa%3Ahover%20span%7B%20%0A%09display%3Ablock%3B%20%0A%7D » message= »CSS de l’info-bulle » highlight= » » provider= »manual »/]

C’est étonnant de simplicité et d’efficacité.

Pour modifier la couleur, il suffit d’ajouter une classe à la balise <span> et de change le background.

Voici un exemple avec un fond bleu :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual » manual= »%3Ca%20href%3D%22%22%3EUn%20tooltip%20bleu%3Cspan%20class%3D%22blue%22%3EInfo-bulle%20bleu%3C%2Fspan%3E%3C%2Fa%3E »/]

Le CSS suivant doit être ajouté au précédent :

[pastacode lang= »css » manual= »span.blue%7B%0A%09background%3Argba(41%2C137%2C216%2C%200.75)%3B%0A%09border%3A1px%20solid%20%231E5799%3B%0A%7D%0A » message= »CSS de l’info-bulle bleue » highlight= » » provider= »manual »/]

voici le résultat :

Cliquez ici pour enregistrer le code sur une autre page

 

3. D’autres méthodes toutes faites.

Il existe des méthodes simples, nécessitant moins de codes pour obtenir des info-bulles de compétition.

  • Tout d’abord, le framework HTML et CSS Bootstrap propose un ensemble de tooltips prédéfinis. Le seul problème vient de la taille des fichiers utilisés qui risquent de ralentir le chargement de votre page. Par ailleurs, vous aurez aussi besoin de jQuery pour que tout ceci fonctionne.
  • Hint-CSS est une petite bibliothèque CSS qui donne simplement de jolies info-bulles sans  difficultés et avec de nombreuses options. A tester avant d’urgence.

Cet article sur les info-bulles se termine. N’hésitez pas à le partager ou à apporter votre contribution au sujet.

 Télécharger l’article au format pdf : pdf-25

 

 

One Comment

Add a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
pagerank
Comment connaître le PageRank et les Backlinks de votre site ?

Le PageRank Google est l'indice de popularité de votre site. Il dépend du nombre de liens qui pointe vers votre site...

site-video-outils-web
Créer un site avec une vidéo en fond de page web

Vous avez certainement déjà rencontré au détour d'un clic un site web dont le fond est une vidéo. Par exemple,...

javascript
Héberger vos fichiers JavaScript sur un site spécialisé.

Pour héberger des fichiers JavaScript, il existe un site  spécifiquement dédié aux fichiers JavaScript et uniquement aux fichiers JavaScript.  Quel est...

Fermer