Des infobulles en CSS3

**Bovino** · 27/06/2012, 13h13

Je vous propose une traduction de l'article anglophone CSS3 tooltips : Des infobulles en CSS3.

Cet article vous montre comment réaliser des infobulles élégantes en utilisant uniquement CSS3.

N'hésitez pas à faire part de vos remarques ou commentaires concernant cet article.

Des infobulles en CSS3.

**Muchos** · 27/06/2012, 23h17

Intéressant et visuellement réussi ^^
Mais ça ne me semble pas bon question accessibilité, puisqu'un lecteur d'écran mêle le contenu de l'infobulle au flux du texte.

**Earered** · 28/06/2012, 10h30

Pour l'accessibilité et garder la sémantique du html, est ce que quelque chose de ce genre ne serait pas plus acceptable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
<style type="text/css">
a[title]:hover:after
{
  content: attr(title);
  z-index: 999;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
</style>
<a href="#" title="Votre description personnalisée">
  Votre texte
</a>
</html>