Infobulle Texte dans un message

[Keiji Shuu]

Bonjour,

Voila, je vous expose mon problème et ma question. J'aimerai essayer de créer une infobulle sur un texte ou un morceau de texte ( donc lorsqu'on survole, au lieux que ce soit une image, ça sera un morceau de texte ). C'est surement assez compliqué à comprendre car je ne sais pas réellement comment l'expliquer.. J'ai donc trouvé un exemple ( Vive moi )

http://vulnera-samento.forumactif.com/t180-liste-des-sortileges

Lorsqu'on passe sur le nom de sorts, il y a une infobulle qui sort pour expliquer l'année où l'on peut l'apprendre. J'aimerai faire un peu dans ce style si c'est possible.

En espérant avoir été assez clair pour que tout le monde puisse comprendre. Merci.

[Lixyr]

Bonjour.

C'est assez simple à faire.

Alors d'une part, le css :

Code:

.infobulle{
  position: relative;}

.infobulle .infobulle-hidden {
  display: none;  position: absolute;    visibility: visible;  z-index: 999;
  /* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */}

.infobulle:hover .infobulle-hidden {
  display: block;}

Il ne faut rien changer exit l'endroit où j'ai mis :

/* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */}

remplacez cette partie par ce que vous voulez : bordure, image de fond, taille, largeur, couleur du texte etc.


Ensuite, le code html pour l'infobulle.

Dans votre cas vous ne voulez que ça ne prenne effet que sur un mot contenu dans un texte : il faut donc utiliser des span, qui eux, ne génèrent pas de retour à la ligne, contrairement aux div.

Prenez ce code :

Code:

<span class="infobulle">VOTRE MOT
  <span class="infobulle-hidden">
      INFORMATION/DESCRIPTION DE VOTRE MOT
  </span>
</span>

Explications :


1)

<span class="infobulle">VOTRE MOT </span>

=> la première classe : infobulle, permet d'indiquer à votre mot qu'il sera rattaché à une infobulle.

Ça correspond à ceci dans votre css :

.infobulle{
position: relative;}

2)

<span class="infobulle-hidden">
INFORMATION/DESCRIPTION DE VOTRE MOT
</span>

=> votre deuxième classe : infobulle:hiden, permet d'afficher l'info bulle quand on passe la souris sur le mot rattaché à cette info bulle.

Ça correspond à ceci dans votre css :

.infobulle .infobulle-hidden {
display: none; position: absolute; visibility: visible; z-index: 999;
/* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */}

.infobulle:hover .infobulle-hidden {
display: block;}

qui correspond en réalité aux deux classes en même temps, mais pour faire plus simple, dites-vous que ça correspond à ceci :

.infobulle .infobulle-hidden {
display: none; position: absolute; visibility: visible; z-index: 999;
/* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */}

C'est plus simple. Vous n'avez donc dans le css qu'à modifier ceci :
/* mettre ici tout ce qui est en rapport avec l'apparence de linfobulle */
C'est à dire l'apparence de votre info bulle.



Voilà.
Si vous avez des questions en rapport avec votre info bulle, n'hésitez pas à demander, je suis là pour ça.

Cordialement,
Lixyr.

[Keiji Shuu]

Et bien tout d'abord, merci pour la réponse relativement rapide. Cependant, même si le message a été clair et très expliqué, j'ai encore quelques problèmes. J'ai bien mis le premier code donné dans la feuille de style CSS. Et le second code donné dans le message. J'ai bien changé les mots qu'il fallait, j'ai même essayé de ne rien touché, seulement le résultat est le même.

Le message apparait comme ça :

Spoiler:

Tu peux m'expliquer ce que j'ai mal fais ?! (A). Merci encore !

[Lixyr]

Oui, je viens de remédier à cette erreur (je viens de me rendre compte que j'avais oublié un espace ici :

.infobulle .infobulle-hidden {

entre le "e" et le petit point.

Si tu reprends le code css donné (premier message : je viens de l'éditer), il n'y aura plus de problèmes.

Cordialement,
Lixyr.

[Keiji Shuu]

C'est juste parfait. J'ai une autre petite question, si par exemple je souhaite que ça se passe sur un seul mot de ma phrase par exemple lorsque je passe sur le mot en gras sur la phrase ci-dessous, l'infobulle se déclanche. Comment je fais ?

Keiji remercie Lixyr de l'aider ainsi !

[Lixyr]

Et bien il faut mettre le code de cette façon :

Keiji <span class="infobulle">remercie
<span class="infobulle-hidden">
INFORMATION/DESCRIPTION DE VOTRE MOT
</span>
</span> Lixyr de l'aider ainsi !

juste entourer le mot "remercie".

[Keiji Shuu]

Et bien, merci beaucoup !

[Lixyr]

Je vous en prie. ^^

(n'hésitez pas à appuyer sur le bouton si ça vous a aidée, et également à mettre votre sujet en si c'est le cas en éditant le premier message =3 )

[Keiji Shuu]

Ah, encore un petit problème ( Oui, je sais.. Je suis nul ! ). Le texte se met à la ligne et ne suite pas la phrase.. On pourrai régler ce problème ? ça fais ça :

Keiji remercie

Lixyr de l'avoir aidé ainsi

EDIT : J'ai trouvé, Merci beaucoup <3 <3 <3

[Lixyr]

Ahhh oui, c'est parce que tu fais tes info bulles dans un message. Le problème c'est que les champs de messages prennent le HTML, mais également le BBcode, ce qui signifie que si jamais tu fais un retour à la ligne, comme ceci :

blabla blabla la ald bala a.
Blablababal zekbz rkzi.

et bien le message qui s'affichera affichera ce retour à la ligne. Il ne faut donc pas mettre d'espace entre les balises, comme ceci :

Code:

Keiji <span class="infobulle">remercie<span class="infobulle-hidden">INFORMATION/DESCRIPTION DE VOTRE MOT</span></span> Lixyr de l'aider ainsi !

[Keiji Shuu]

Merci beaucoup. Problème résolu.. <3