Infobulles CSS

Bonjour,

Je cherchais à faire des infobulles en CSS et non en Jquery car mon code est déjà très lourd en scripts. J'ai suivi le tuto sur cette page :
http://www.alsacreations.com/astuce/lire/1-comment-personnaliser-une-infobulle.html

Franchement c'est génial, extra !!!

J'ai testé sur des versions récentes d'IE, FF, Safari et Chrome et ça marche parfaitement.

Je ne connais pas du tout ces balises <abbr>, pouvez-vous me dire si vous avez déjà eu des soucis de compatibilité avec cette solution ?

Je pose la question car pour moi c'est trop beau pour être vrai.

Merci !

Salut,

Effectivement cette méthode est trop belle pour être utilisable à tout point de vue.

Elle pose un problème ergonomique, en effet quand l'infobulle dépasse du viewport on ne peut pas voir son contenu. Une vrais infobulle s’afficherait de l'autre côté de la souris si elle dépassait de l'autre, ici ce n'est pas le cas.

Il faudrait peut être faire un petit traitement en javascript pour qu'elle soit vraiment optimal, mais alors ça perd un peu de son intérêt.

Bref il faut avoir la main mise sur le contenu de l'infobulle et être sur que la largueur du site sera suffisamment basse pour que l'infobulle ne déborde pas du viewport (impossible en somme vu le nombre de résolution actuel).

Bonjour,
IE6 ne connaîtra pas l'élément abbr ni le sélecteur :hover s'il n'est pas sur un a.
Quant au sélecteur :after, il n'est pas compris avant IE8, de même pour la fonction attr().

Ok, merci beaucoup pour ces réponses très intéressants !


Il y a donc de petits désagréments mais ça reste une bonne alternative à du JavaScript. Je vais l'utiliser maintenant que j'ai ces infos.

Et merci à l'auteur du tuto.

Remarque que tu peux aussi passer outre certains blocages en faisant quelque chose comme:

<a class="abbr">HTML<span class="abbrmeaning">HyperText Markup Language</span></a>

.abbr {
    position : relative;
}
.abbr .abbrmeaning {
    display : none;
    white-space : nowrap;
    border-bottom : 1px black dotted;
    /* le style de ta boîte ici */
}
.abbr:hover .abbrmeaning {
    display : block;
}

Mais d'aucuns te diront que ce n'est pas accessible et que c'est moche comme code ^^' (ce qui est vrai).
Modifié par Gothor (02 Mar 2012 - 15:53)