Infobulle en css (2) - CSS tooltips

Publié le par PêUR

J'avais expliqué, il y a quelques temps, comment réaliser des infobulles en CSS sans javascript.

Le problème avec cette méthode, était que si une infobulle venait recouvrir un lien lui même "infobullé", on le voyait apparaitre à travers cette infobulle!

Cette fois le problème est résolu, et ce, grâce à Stu Nicholls. En plus sa méthode permet de les rendre un peu plus jolies qu'auparavant.

 

Exemple

Lorem ipsum dolor sit amet, consectetuerTooltip0: fond jaune bordures fines grises adipiscing elit. Maecenas aliquet, lacus in molestie tempus, urna mi adipiscingTooltip1: fond bleu bordures épaisses blanches leo, vitae congue urna sem nec mauris. Nam convallis rhoncusTooltip2: fond noir bordures épaisses blanches erat. VestibulumTooltip3: fond jaunes bordures épaisses blanches blandit elit vel metus nonummyTooltip4: fond vert bordures épaisses blanches sagittis. Sed vehicula molestie tellus. Praesent eleifend quam eget tortor. Integer felis leo, malesuada id, feugiat eget, suscipit et, quam. SuspendisseTooltip5: fond vert bordures épaisses noires at arcu.

 

Code CSS

Pour obtenir le résultat de la première infobulle vous devez rajoutez dans votre CSS le code suivant:

CSS

a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    position: relative;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
    top: 20px;
    left: -10px;
    padding: 5px;
    color: #000;
    border: 1px solid #bbb;
    background: #ffc;
    width:170px;
}
a.tooltip:hover em span {
    position: absolute;
    top: -7px;
    left: 15px;
    height: 7px;
    width: 11px;
    background: transparent url(image-infobulle.gif);
    margin:0;
    padding: 0;
    border: 0;
}

image-infobulle.gif étant l'url de l'image ci-dessous que vous allez prendre soin d'enregistrer sur votre disque dur et d'uploader sur votre espace de stockage personnel:

image pour infobulle

Veillez s'il vous plaît à ne pas utiliser directement l'url de cette image mais bien celle que vous aurez uploader. Je suis en effet à même de la déplacer pour la maintenance du blog et elle n'apparaitra plus chez vous :(

Si pour vos infobulles, vous ne souhaitez pas avoir cette petite flèche à son sommet, il vous suffit de supprimer la ligne du dernier selecteur du code ci-dessus: a.tooltip:hover em span

 

Code HTML

Pour tous vos liens nécessitant une infobulle, il vous suffit de leur rajouter un appel à la class tooltip, de mettre dans le texte du lien le texte de l'infobulle encapsulé par des em ainsi qu'un balisage span vide pour positionner l'image:

HTML

<a href="url-du-lien" class="tooltip">texte du lien<em><span></span>texte de l'infobulle</em></a>

 

Aller plus loin...

Infobulles avec des images

Bien entendu vous pouvez utiliser ces infobulles avec des images, il suffit de remplacer le texte du lien par une balise <img />:

HTML

<a href="url-du-lien" class="tooltip"><img src="url-image.gif" alt="texte alternatif" /><em><span></span>texte de l'infobulle</em></a>

Exemple:

Mon zikiVoir mon identité numérique

 

Personnalisez vos infobulles

Vous avez vu que dans mon exemple initial j'utilise 6 styles différents d'infobulles. Pour ne pas surcharger l'article, je n'ai mis que le code de la première infobulle. Vous l'avez compris, pour passer d'un style à l'autre il suffit de modifier quelques valeurs de propriétés dans le css. Pour vous guidez voici ce qu'il faut savoir:

Dans le sélecteur a.tooltip:hover em, top permet de positionner la hauteur de l'infobulle, et left son placement horizontal, notez que dans mon exemple sa valeur est négative afin que l'infobulle soit en retrait du texte survolé. color indique la couleur de la police de l'infobulle et background sa couleur de fond. border permet d'indiquer la largeur des bordures de l'infobulle ainsi que son style et sa couleur. Pour finir, width renseigne la largeur de l'infobulle.

Le sélecteur a.tooltip:hover em span permet de positionner une image en haut de l'infobulle lui donnant ce style particulier de bulle de BD. top doit correspondre à la valeur négative de la hauteur de l'image, left la positionne horizontalement par rapport au début de l'infobulle, height et width correspondent respectivement à la hauteur et la largeur de l'image, et enfin, background permet de renseigner l'url de l'image

Ci-dessous, retrouvez les différentes images utilisés pour les exemples présentés plus haut, avec le code couleur de background, le code couleur des bordures, la largeur des bordures et la taille de l'image (hauteur x width)

image pour infobulle #ffc / #bbb / 1px / (7px x 11px)

image pour infobulle #c3d9ff / #fff / 4px / (14px x 29px)

image pour infobulle #000 / #fff / 4px / (14px x 29px)

image pour infobulle #ff8 / #fff / 4px / (14px x 29px)

image pour infobulle #cdeb8b / #fff / 4px / (14px x 29px)

image pour infobulle #cdeb8b / #000 / 4px / (14px x 29px)

Bien entendu rien ne vous empêche de modifier ces images comme bon vous semble (couleur, taille, forme), avec un peu d'imagination et l'utilisation de logiciels d'édition d'images comme The Gimp, je suis sûr que vous pouvez faire de très belles choses :)

 

Z-index et problème de superposition avec flash

Si vos infobulles ne se superposent pas à une animation flash (dailymotion, youtube...) de votre blog, ne cherchez pas à modifier le z-index du code proposé... cela vient du flash!

Pour y remédier il suffit de rajouter un paramètre de transparence à votre animation:

Pour la balise <object>, rajoutez une balise <param name="wmode" value="transparent">

Pour la balise <embed>, rajoutez l'attribut wmode="transparent"

 

Bonne manip'

 

Publié dans CSS

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

Kimski 05/11/2007 14:37

Bon j'ai trouvé...Dommage que les balises ne passent pas ! Merci pour le script.

Kimski 05/11/2007 11:33

Désolé les balises HTML ne passent pas...

Kimski 05/11/2007 11:29

Bonjour,
Tombé par hasard sur ce script qui est trés bien ma foi !
J'ai juste un probléme de syntaxe :
si je fait en HTML + PHP

, vous êtes connecté(e), voulez-vous, vous déconnecter ?
Ca passe bien...
Mais je fait en PHP+HTML
$lien5="logout.php";
afficher_url($lien5," ". $_SESSION['login_session'].", vous êtes connecté(e).".$_SESSION['login_session'].", voulez-vous, vous déconnecter ?");
Tout s'affiche ! le lien et l'infobulle...et je tourne en rond § Un petit coup de pouce serait bienvenu. Merci

ivorhh 01/11/2007 22:54

tres sympathique (surtout pour y mettre des images ET du texte) sauf que j'ai un bug non resolu depuis des semaines : l'affichage en bas d'un calque.
En effet, quelque soit la valeur de z-index, le bord inférieur du calque, celui qui contient le texte survolable, coupe l'affichage du popup.

J'ai d'ailleurs le meme avec l'exemple latin, mais cette fois avec les bords latéraux.

jcletang 29/10/2007 19:27

Bonjour,
Merci pour ces codes.
Je viens de tester et ça fonctionne très bien sous Firefox 2 et sous IE 7 (le tout sous Vista) mais ne fonctionne pas sous Opéra (9.22).
Connaissez-vous une solution pour corriger ?
Merci encore.