Infobulle Texte dans un message

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Infobulle Texte dans un message

Message par Keiji Shuu le Dim 24 Juil 2011 - 23:48

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 Very Happy )

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.


Dernière édition par Keiji Shuu le Lun 25 Juil 2011 - 21:28, édité 1 fois

Keiji Shuu
Nouveau membre

Messages : 7
Inscrit(e) le : 30/07/2009

http://naruto-shouka.forumactif.org/
Keiji Shuu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle Texte dans un message

Message par Lixyr le Lun 25 Juil 2011 - 19:05

Bonjour.

C'est assez simple à faire.

Like a Star @ heaven 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.


Like a Star @ heaven 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) Like a Star @ heaven
<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) Like a Star @ heaven
<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.



Dernière édition par Lixyr Yrna le Lun 25 Juil 2011 - 20:57, édité 2 fois

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle Texte dans un message

Message par Keiji Shuu le Lun 25 Juil 2011 - 20:56

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 !

Keiji Shuu
Nouveau membre

Messages : 7
Inscrit(e) le : 30/07/2009

http://naruto-shouka.forumactif.org/
Keiji Shuu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle Texte dans un message

Message par Lixyr le Lun 25 Juil 2011 - 20:58

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.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle Texte dans un message

Message par Keiji Shuu le Lun 25 Juil 2011 - 21:03

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 !

Keiji Shuu
Nouveau membre

Messages : 7
Inscrit(e) le : 30/07/2009

http://naruto-shouka.forumactif.org/
Keiji Shuu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle Texte dans un message

Message par Lixyr le Lun 25 Juil 2011 - 21:13

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".





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle Texte dans un message

Message par Keiji Shuu le Lun 25 Juil 2011 - 21:19

Et bien, merci beaucoup ! Very Happy

Keiji Shuu
Nouveau membre

Messages : 7
Inscrit(e) le : 30/07/2009

http://naruto-shouka.forumactif.org/
Keiji Shuu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle Texte dans un message

Message par Lixyr le Lun 25 Juil 2011 - 21:22

Je vous en prie. ^^

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





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle Texte dans un message

Message par Keiji Shuu le Lun 25 Juil 2011 - 21:24

Ah, encore un petit problème ( Oui, je sais.. Je suis nul ! Very Happy ). 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

Keiji Shuu
Nouveau membre

Messages : 7
Inscrit(e) le : 30/07/2009

http://naruto-shouka.forumactif.org/
Keiji Shuu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle Texte dans un message

Message par Lixyr le Lun 25 Juil 2011 - 21:28

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 !





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle Texte dans un message

Message par Keiji Shuu le Lun 25 Juil 2011 - 21:30

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

Keiji Shuu
Nouveau membre

Messages : 7
Inscrit(e) le : 30/07/2009

http://naruto-shouka.forumactif.org/
Keiji Shuu a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum