Infobulles en CSS
Commençons par quelque chose de simple, faire apparaitre des info-bulles personnalisées sans utiliser Javascript mais uniquement la pseudo-classe CSS :hover.
Commençons par écrire l'HTML, avec des liens qui nécessitent de l'information supplémentaire, qui apparaitra uniquement au passage de la souris. (Ceci est possible avec autre chose que des liens, mais cela ne fonctionnera pas dans IE <7.)
<ul class="liens">
<li><a href="#">Mon 1er lien<span>Ceci est la description de mon 1er lien.</span></a></li>
<li><a href="#">Mon 2e lien<span>Ceci est la description de mon 2e lien.</span></a></li>
<li><a href="#">Mon 3e lien<span>Ceci est la description de mon 3e lien.</span></a></li>
<li><a href="#">Mon 4e lien<span>Ceci est la description de mon 4e lien.</span></a></li>
</ul>
Dans le fichier CSS, nous allons commencer par présenter les descriptions qui sont dans les span des liens. Ce sera plus facile de les présenter avant, puis de les masquer par la suite:
ul.liens a span
{
position: absolute;
left: 30ex;
background-color: #ffd;
/* Couleur jaune ressemblant à une bulle d'aide. */
font-size: small;
text-decoration: none;
width: 25ex;
padding: 3px;
border: 1px outset gray;
z-index: 5;
/* Pour être sûr qu'elles apparaissent au dessus de tout le reste. */
-moz-border-radius: 5px;
border-radius: 5px;
/* Pour arrondir les coins. */
}
Cela doit donner de petits restangles comme ceci: Test de mon infobulle
Une fois qu'elles sont comme on le souhaite, on peut les masquer en rajoutant display: none;
~
Maintenant reste à les faire apparaitre seulement au passage de la souris. C'est la fonction de la pseudo-classe :hover qui sert à indiquer ce qu'il se passe quand la souris est sur un élément. C'est souvent utilisé pour dire que les liens sont de telle couleur ou soulignés au passage de la souris, mais ça peut être utilisé pour n'importe quel autre élément. Sauf bien sûr dans IE <7, 
dans ce cas il faut utiliser Javascript un peu comme dans la 2e partie de cet article.
ul.liens a:hover span
{
display: block;
}
Ceci fait que les info-bulles n'apparaitront qu'au passage de la souris sur le lien qui les contient. Voir un exemple d'infobulle en CSS.
Voyons maintenant un exemple très proche, utilisant Javascript et permettant de faire apparaitre un élément lors d'un clic:
<a href="..." onclick="javascript:montre('info')>test<span id="info">Description qui apparait au clic. </a>
Il suffit de mettre dans un fichier Javascript la fonction montre qui affiche l'élément s'il est caché et le cache s'il est affiché:
function montre (id)
{
var e = document.getElementById (id);
if (e.style.display == "none")
e.style.display = "block";
else
e.style.display = "none";
}
À partir de cet exemple en Javascript, on peut faire toute sorte de menus ou de bulles d'explications qui apparaissent. Mais on peut aussi se débrouiller uniquement en CSS.
-> Pour plus d'exemples de menu, voir le tutoriel sur les menus chez AlsaCréations.
Cet article a été posté par David le Jeudi 10 janvier 2008 à 20:18
dans la catégorie HTML & CSS avec les mots clés: CSS, Infobulle, Menu.
Vous pouvez laisser une réponse, ou rétrolien depuis votre propre site.
Cet article vous a aidé? 
Bonjour, Merci pour vos informations très pertinentes concernant votre article du 10 janvier dernier concernant les infosbulles en CSS .... Impressionant!
Je rencontre cependant un petit problème et j'ose espérer qu vous allez pouvoir m'éclairer.
Je souhaite que l'infobulles contienne en fait un texte émanant d'une base de donnée, j'utilise Dreamweaver et j'ai utilisé les techniques courantes d'implémentation mais malheureusement cela ne semble pas fonctionner.
En fait e que j'ai fait est de tout simplement mettre ce qui émane de mon jeu d'enregistrement entre les balise SPAN , là ou vous mettez du texte en clair.
merci poru votre aide par avance et félicitation poru votre site, je le place dans mes favvoris.
Jeudi 14 février 2008 à 9:38Essayez déjà sans cacher les span dans le CSS. Si tout va bien ils apparaitront.
Jeudi 14 février 2008 à 19:13Bonjour,
je découvre avec plaisir votre site en surfant un peu au hasard à la recherche d'une solution au problème suivant :
Sur chacun de mes formulaires, je souhaitais faire une infobulle pour afficher un texte au survol des mots "Mentions légales".
Cela fonctionne très bien mais je viens de me rendre compte que si l'on clique sur le lien au lieu de seulement le survoler, ou sur le texte de l'infobulle, le contenu du formulaire délà rempli est effacé.
Existe-t-il un moyen de rendre le lien comme l'infobulle insensible au clic ?
Merci d'avance !
Mercredi 27 février 2008 à 22:25Le fait de mettre un lien est pour IE je suppose.
À cause de lui, vous êtes obligé d'utiliser Javascript. 2 solutions:
- ne pas mettre de lien et faire apparaitre la bulle en Javascript
- ou neutraliser le lien: <a href="xxx" onclick="javascript:return false;">
La 2e solution est meilleure si xxx est une page comportant à nouveau les mentions légales. Ça en fait un texte parfaitement accessible même si Javascript est désactivé (3% des gens, mais bon...).
Mercredi 27 février 2008 à 23:57Merci beaucoup David !
Oui, j'essaye de rendre mes pages compatibles avec les principaux navigateurs, dont IE6.
Votre deuxième solution est exactement ce que je cherchais et fonctionne parfaitement sous Firefox, IE7, IE6, et Nescape. (Sous Opera, l'infobulle apparaît d'abord tronquée et il faut cliquer sur le lien pour qu'elle s'ouvre en totalité... mais ce n'est pas grave et il existe sûrement une solution).
Merci encore !
Jeudi 28 février 2008 à 11:01Bonjour,
Je voulais créer une infobulle en css qui contient un tableau. Est ce que c'est possible ?
Ainsi, j'ai utilisé le javascript mais maintenant les infobulles se cache derrière le tableau. Pourriez vous me dire comment faire pour qu'elles s'affichent en premier plan.?
Merci d'avance.
Seb
Mercredi 5 mars 2008 à 14:29Tu ne peux pas utiliser les span pour les infobulles, car on a pas le droit d'y mettre un tableau.
)
Les div marcheraient, mais là on ne peut pas les mettre dans les a.
Il faut donc que tu passes obligatoirement par Javascript pour afficher/cacher tes tableaux.
Fait d'abord ta présentation avec tout visible, et tu masqueras les tableaux après.
Mercredi 5 mars 2008 à 15:28Merci pour votre réponse si vite.
Je ne sais pas quoi faire exactement. Voici le code si vous pourriez m'aider.
var IB=new Object;
var posX=0;posY=0;
var xOffset=10;yOffset=10;
function AffBulle(texte) {
contenu=""+texte+" ";
var finalPosX=posX-xOffset;
if (finalPosX<0) finalPosX=0;
if (document.layers) {
document.layers["bulle"].document.write(contenu);
document.layers["bulle"].document.close();
document.layers["bulle"].top=posY+yOffset;
document.layers["bulle"].left=finalPosX;
document.layers["bulle"].visibility="show";}
if (document.all) {
bulle.innerHTML=contenu;
document.all["bulle"].style.top=posY+yOffset;
document.all["bulle"].style.left=finalPosX;//f.x-xOffset;
document.all["bulle"].style.visibility="visible";
}
else if (document.getElementById) {
document.getElementById("bulle").innerHTML=contenu;
document.getElementById("bulle").style.top=posY+yOffset;
document.getElementById("bulle").style.left=finalPosX;
document.getElementById("bulle").style.visibility="visible";
}
}
function getMousePos(e) {
if (document.all) {
posX=event.x+document.body.scrollLeft;
posY=event.y+document.body.scrollTop;
}
else {
posX=e.pageX;
posY=e.pageY;
}
}
function HideBulle() {
if (document.layers) {document.layers["bulle"].visibility="hide";}
if (document.all) {document.all["bulle"].style.visibility="hidden";}
else if (document.getElementById){document.getElementById("bulle").style.visibility="hidden";}
}
function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
document.write("");
}
if (document.all) {
document.write("");
document.onmousemove=getMousePos;
}
else if (document.getElementById) {
document.onmousemove=getMousePos;
document.write("");
}
}
Mercredi 5 mars 2008 à 17:33Là ça n'a rien à voir avec mon article qui était justement sur les infobulles sans Javascript.
Je ne peux pas débugger ton code (pas gratuitement en tout cas!), surtout qu'il semble dater pas mal (époque Netscape et IE3).
Par contre je peux t'inviter à utiliser et comprendre les 5 lignes que je donne dans l'article et qui font à peu près la même chose sans le positionnement, que tu peux ajouter en 2 lignes.
Mercredi 5 mars 2008 à 18:19Bonjour,
j'utilise votre script qui est ce que je cherchais.
Cependant, je n'arrive à placer mes bulles comme je le souhaite.
Pourriez vous m'aider, voici le code:
[Supprimé par admin, voir commentaire suivant...]MERCI
Mardi 16 décembre 2008 à 18:25Bonjour,
Je supprime votre code qui ne s'affichait pas correctement ici, et qui ne peut pas me servir à vous aider.
Si ça ne s'affiche pas au bon endroit, c'est juste un problème avec les coordonnées des bulles.
Horizontalement, essayez de changer left: 237px; et verticalement, essayer de rajouter des marges, positives ou négatives.
Sinon le mieux est de me mettre un lien vers la page en question.
Samedi 20 décembre 2008 à 14:58Bonjour !
ma copine semblant souhaiter venir me rejoindre à Paris, je lui fais un
site (http://www.valeriefondela.doobee.fr/).
J'y souhaitais améliorer les quelque peu pitoyables titles, alors : j'ai
pensé "infobulles".
J'en ai écrit d'assez efficaces, en javascript. Je me demandais si je ne
pourrais pas faire plus sexy encore, en css. J'avoue que je suis assez
satisfait... du résultat; jugez plutôt :
*[infotest]:hover:after
{
content:url(Imx/puce.png) ' ' attr(infotest);
position:absolute;
bottom:3ex;
margin:0 1em 0 .5em;
border:solid 1px;
padding:.7ex .8em .5ex;
font-size:80%;
background-color:#fff;
}
La seule chose qui manque, à mes yeux, à cette magnifique infobulle, c'est
de suivre le curseur. Une idée ?
Bien cordialement,
Samedi 25 juin 2011 à 16:27