Comment faire pour insérer une info bulle dans un article ?

D'abord, insérez à la fin de votre feuille de CSS le code suivant :

a.info {
  position:relative;
  border-bottom:1px dashed #808080;
  text-decoration: none;
  font-weight: bold;
}
a:hover.info {
  text-decoration: none;
  background: none;
}
a.info span {display: none;}
a:hover.info span {
  display: inline;
  position: absolute;
  top:1.5em;
  left:0.5em;
  z-index: 20;
  background: #couleur de fond de l'info bulle;
  color: #couleur du texte de l'info bulle;
  border:1px solid #couleur de la bordure de l'info bulle;
  width:150px;
  text-align:center;
  font-weight:normal;
  font-size: 10px;
  line-height:12px;
  padding:2px 4px;
}

Evidemment remplacez le texte en orange par le code de votre couleur ..

Ensuite, quand vous voulez mettre une info bulle dans votre article, placez ce code dans l'"affichage HTML de l'article" :

<a href="#" class="info">votre texte<span>texte dans l'info bulle</span></a>

Et normalement (si ça ne marche pas chez vous, je n'y peux rien ..), quand on passe la souris sur le texte, l'infobulle s'affiche ..
Je peux pas vous mettre un exemple sur cet article parce que le mode invité ne permet pas l'accès au CSS mais voyez sur cet article.

Voila, j'espère que vous m'avez comprise, sinon posez vos questions ;)

Mathilde, pour vous servir.

(bon, c'est à la fois du CSS et de l'HTML, mais j'le met dans la catégorie CSS.)

Publié par Sakatruc le 24 août 2006 à 14:04

Classé dans CSS | 24 commentaires

Tags :

Par yell0w.clash le 24 août 2006 à 14:06
Et merde, j'ai zappé la catégorie ..
Par DarlIng le 24 août 2006 à 14:49
Moi j'ai une petite question...
Est ce que quelqu'un sait comment créer son propre curseur ?( à la place de la souris... )
Par julie-spirit le 24 août 2006 à 15:42
Est ce que tu pourrais s'il te plaît désactiver le clique droit car je n'arrive pas à copier le code... =(
Merci pour tout. =)
Par Mono.Chrome le 24 août 2006 à 16:16
Et comment on fait les infobulles avec une image .. ? =)
Par yell0w.clash le 24 août 2006 à 19:17
Pour mettre une image en fond, je suppose qu'il faut remplacer la couleur de fond par l'url de ton image, mais j'ai jamais essayé ..
Par lov3-de-lui le 24 août 2006 à 19:43
Je voulais savoir où est-ce qu'on copiait le CSS ? Dans la feuille principale ?
Merci !
Par yell0w.clash le 25 août 2006 à 8:32
Beh oui, dans la feuille principale ..
Par flowerscolors le 25 août 2006 à 10:05
J'ai tout fait bien (enfin j'pense) mais çà ne marche pas. quand je copie le code html, le résultats donne que mes deux liens sont coller ensemble...au lien que un apparaisse dans l'info bulle :/
Par Ze-pix-elle le 25 août 2006 à 18:04
Bah moi comme flowerscolors ça marche pas... Pfiou... Ca m'énerffff!=(
Help, help!=(
.B'zÖuX.
Par Open.yOur.eyes le 26 août 2006 à 19:24
Merci beaucoup, grâce a toi j'ai réussi :)
Par jojolamiss le 26 août 2006 à 21:02
Cool; j'ai réussie!!!
Par mariaka le 26 août 2006 à 22:58
Ca a l'air vachement sympa ces trucs d'info bulles !
Par lolo-bad-life le 27 août 2006 à 22:41
J'ai un probleme : J'y arrive pas [pour mettre une info bulle dans un article]
Help !!
Par vivengkirid le 30 août 2006 à 12:41
Merci beaucoup, ça marche =)
Par Pink-pOisOn-heaRt le 2 septembre 2006 à 19:20
Moi mon problème il va paraître trés con, mais j'arrive pas à copier le texte à mettre dans le CSS :'(
Est-ce que quelqu'un sait comment sa se fait ?!
Par why-n0t le 15 octobre 2006 à 20:32
Ca marchait. Et là pouf! plus rien =(
Par piti-arc-en-ciel le 17 octobre 2006 à 15:20
j'arriveee pas heuuuuu :'(
Par chamO.pOintu le 27 octobre 2006 à 14:24
Merci beaucoup ça marche =)
Par caap-hot le 6 novembre 2006 à 20:24
euh moi ça va peu etre paretre con mais.. je comprend pas ou il faut mettre le code.. oO
oui dans l'affichage HTML de l'article mais.. le probleme c'est que je sais pas ou c'est :S
merci..
Par Linblair le 30 novembre 2006 à 18:33
Heu ... j'ai toujours pas compris à quoi ça sert une info bulle ?
Je sens que je vais me faire des "amis" en posant cette question lol
Par paper.flowers le 26 décembre 2006 à 17:45
merci beaucoup c'est gébnial ce qu'on peut faire avec l'informatique ! ton blog m'a l'air vraiment génial !
Par Nevrose.Psychotik le 8 mars 2007 à 12:49
Tout fonctionne parfaitement, mais j'ai un problème toute de même. J'ai essayé de mettre un lien dans une info bulle, mais ça ne marche pas du tout.. Le lien ne se met pas dans la bulle mais à côté du texte dans l'article. (Je sais pas si on peut comprendre c'que je dis.. xD M'enfin, ça marche pas c'est tout! ^^" ) D'où ma question > Comment fait-on pour mettre un lien dans une info bulle? T.T Je suis désespérée.. xD Enfin voilà, si on pouvait me répondre, ce serait gentil ^.^ ! Merci d'avance.
Par anal-phabet le 5 avril 2007 à 16:19
Moi mon probleme c'est que je ne sais pas comment modifier la largeur des info-bulles... :(
Si quelqun avait la bonté de m'aider.
Thanks ^^
Par xXx.Hinag3shi-San.xXx le 17 décembre 2008 à 22:22
Avec la V3 j'ai l'impression que les info bulle ne fonctionne plus. J'ai réinséré le code dans le CSS mais quand je m'occupe de celui du HTML, quand je fais un apperçut, ça a l'air de marcher, mais après publication, ce qui devrait être dans la bulle se retrouve dans l'article lui même!!

une petite info? Merci d'avance:!
hina!
 

Ajouter un commentaire

Note : Sakatruc n'accepte que les commentaires des personnes possédant un compte sur Cowblog : vous devez obligatoirement être identifié pour poster un commentaire.









Commentaire :








Votre adresse IP sera enregistrée pour des raisons de sécurité.
 

La discussion continue ailleurs...

Pour faire un rétrolien sur cet article :
http://sakatruc.cowblog.fr/trackback/1056126

 
Créer un podcast