jeudi 10 Jan 2008

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.


café Cet article vous a aidé? 
Offrez-moi un café!
Agrégateur informatique

13 réponses à “Infobulles en CSS”

  1. 1
    Aumcara a dit:

    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.

  2. 2
    David a dit:

    Essayez déjà sans cacher les span dans le CSS. Si tout va bien ils apparaitront.

  3. 3
    Leo44 a dit:

    Bonjour,
    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 !

  4. 4
    David a dit:

    Le 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...).

  5. 5
    Leo44 a dit:

    Merci 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 ! :-)

  6. 6
    Sébastien a dit:

    Bonjour,

    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

  7. 7
    David a dit:

    Tu 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. :o)

    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.

  8. 8
    Sébastien a dit:

    Merci 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("");
    }

    }

  9. 9
    David a dit:

    Là ç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. ;-)

  10. 10
    esta a dit:

    Bonjour,

    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

  11. 11
    David (azur-dev.kizone.net) a dit:

    Bonjour,

    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. :-)

  12. 12
    Sacapuss (valeriefondela.doobee.fr) a dit:

    Bonjour !

    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,

  13. 13
    Jenna (sanantoniolaw.tripod.com) a dit:

    J'avais besoin de quelques bulles d'aide pour une chose. En regardant autour d'un peu d'inspiration, je n'ai pas eu à aller plus loin que mon quai.

Laisser un commentaire

Azur Dev