• Infobulle [EklaBlog]

     
    /!\ Le JavaScript doit être activé!

    Passes la souris sur ce texte ;)Du texte apparaît ! 
    On peut même mettre des images ;)

    Pour ajouter cet effet dans vos articles ou vos modules, nous allons réutiliser un script d'EklaBlog. Rassurez-vous, nous n'allons pas toucher au JS

    <a class="infobulle" onmouseover="Help.bubble(this)">ELEMENT VISIBLE</a><span class="help_content">CONTENU INVISIBLE</span>

    Remplacez "ELEMENT VISIBLE" par votre objet qui déclenchera l'infobulle. Dans mon exemple, c'est du texte, mais vous pourriez très bien le mettre sur une image : Remplacez URL par le lien de votre image dans le code ci-dessous

    <a class="infobulle" onmouseover="Help.bubble(this)"><img src="URL"/></a><span class="help_content">CONTENU INVISIBLE</span>

    A la place de "CONTENU INVISIBLE", mettez le texte et/ou les images qui apparaitrons.

    /!\ Vous ne pouvez pas insérer de lien de l'infobulle avec ce code. Si vous souhaiter pouvoir cliquer dans l'infobulle, je vous renvoie à l'article suivant :
    => http://fanstasy-graph.eklablog.net/infobulle-amelioree-a108139450

    Vous pouvez également personnaliser cet affichage grâce au CSS

    On appelle l'infobulle avec un lien. Si vous ne voulez pas que le texte ait la même apparence que les liens de votre blog, vous pouvez créer une nouvelle classe.

    a.infobulle {propriété: valeur;}

    Ensuite, pour modifier l'apparence générale, il faut utiliser le sélecteur #help_bubble, par défaut sur Ekla (je vous donne le code par défaut)

    #help_bubble {
       propriété : valeur; /*personnalisez*/
    }

    Remarque : ce sélecteur concerne également les infobulles qui apparaissent en survolant les derniers visiteurs.


  • Commentaires

    1
    Lundi 26 Décembre 2011 à 10:59

    qu'est ce que c'est qu'une infobulle s'il te plait? tu as une photo ou une capture d'ecranN? merci d'avance

    2
    Lundi 26 Décembre 2011 à 12:47

    Passe ta souris sur le texte rouge au début

    3
    Lundi 26 Décembre 2011 à 13:06

    ah daccord xD merci en fait comme j'ai regarder très vite le tutoriel je n'avais pas remarquer xDD //SBAFF// merci du tuyau :3 au fait j'ai remarquer que l'astuce du menu coulissantr avait été bloquée, c'est definitif, ou provisoire?

    4
    Lundi 26 Décembre 2011 à 13:45

    Pour l'instant définitif...

    5
    Lundi 26 Décembre 2011 à 17:16

    ho non :'"(

    6
    Lundi 26 Décembre 2011 à 17:37

    Merci :D

    7
    Lundi 26 Décembre 2011 à 19:43

    *s'incruste* définitif??Pourquoi?=(

    sinon...j'ai compris la moitiée*sort* enfin je vais tester x)

    8
    Lundi 26 Décembre 2011 à 21:22

    C'est pas encore trop compliqué ça ;)

    Sinon pour le menu, j'avais trouvé un code pour les forum qui donnait un menu coulissant et je l'ai adapté sur Ekla. Sauf que la créatrice considérait que c'était du plagiat et m'a donc demander d'enlever l'article --'

    9
    Lundi 26 Décembre 2011 à 21:24

    Du plagiat mon oeil--" la créatrice du code?oO et ben dis donc...--"

    10
    Lundi 2 Janvier 2012 à 12:22

    Comment est ce qu'on sait si notre Javascipt est en marche ?

    En tout cas merci du tuto ^^

    11
    Lundi 2 Janvier 2012 à 12:27

    @ Chupsii : Il faut que tu envoies un mail a Eklablog en disant que tu voudrais activer le Javascript sur tout tes blogs puis logiquement, Stéphanie va te renvoyer un mail en disant que c'est activer. Si tu ne sais pas si il est activé, et bien tu peux tester le tuto de Nagalia (de l'article) et si ça marche c'est que c'est activé, et si ça marche pas c'est que soit c'est pas activé soit tu t'es trompée quelque part :)

    12
    Lundi 2 Janvier 2012 à 12:31

    Merci Wanou ^W^

    13
    Lundi 2 Janvier 2012 à 12:36

    De rien Chu'Chu

    14
    Jeudi 5 Janvier 2012 à 17:17

    Ahhhhh merci ! (L) Il y a un certain temps, j'avais essayé de faire l'infobulle, mais ça déconnais u_u' Merci encore ô/

    15
    Lundi 16 Janvier 2012 à 09:58

    Toujours de super créations Nagalia. Bravo.

    D'après ce que j'en sais, on ne peut pas agir directement sur l'infobulle "standard" pour la personnaliser. Il faut passer par la création d'un sélecteur que l'on affiche au survol par la souris. Le problème que je n'ai pas encore résolu est que je arrive pas à avoir le focus sur ce sélecteur et par conséquent, pas moyen d'y mettre un lien.

    Mais je ne désespère pas.

    16
    Samedi 28 Janvier 2012 à 20:13

    Comment sautez la ligne et aussi mettre une imange ?

    Merci d'avance !!!

    17
    Dimanche 29 Janvier 2012 à 17:22

    Saut de ligne:
    <br/>

    Image:
    <img src="URL_DE_IMAGE"/> 

    18
    Dimanche 29 Janvier 2012 à 20:29

    Merci Beaucoup !!!!!

    19
    Dimanche 29 Janvier 2012 à 22:43

    Oui j'ai bien trouvé mettre une image c'est <img scr="Url De L'image"/> mais mettre là dans le fond ?!!

    Merci et navré pour le dérengement !!!!!

    20
    Lundi 30 Janvier 2012 à 17:26

    Tu veux une image enn fond de l'infobulle?

    21
    Lundi 30 Janvier 2012 à 19:44

    Oui s'il te plait !!!!!

    Merci

    22
    Lundi 30 Janvier 2012 à 20:08

    #help_bubble {background: url("URL_DE_IMAGE");}

    23
    Lundi 30 Janvier 2012 à 20:42

    Merci beaucoup !!!!! Mais il y a un tout petit probleme : MODIFIER LA COULEUR !!!

    24
    Vendredi 17 Février 2012 à 22:21

    Et on le met ou le code ? ON fait editer un lien ?

    25
    Vendredi 17 Février 2012 à 22:52

    @Univers: La couleur du texte ou du fond?

    @Shimyjadina: Quad tu édite un article, il faut cliquer sur la petite icone "HTML"

    26
    Vendredi 17 Février 2012 à 22:53

    Ha oui ces bon ! Merci beaucoup ! Tu devrais faire un livre d'or (apars si tu la deja fait)

    27
    Vendredi 16 Mars 2012 à 21:41

    Ou ont mets ce code???

    28
    Vendredi 16 Mars 2012 à 22:56

    Celui là dans le html d'un article pour faire apparaitre l'infobulle

    <a class="infobulle" onmouseover="Help.bubble(this)">TEXTE VISIBLE</a><span class="help_content">TEXTE INVISIBLE</span>

    Et l'autre dans le css pour personnaliser l'infobulle

    29
    Mardi 20 Mars 2012 à 20:26

    Bonsoir j'ai une petite question est-ce que l'on peut mettre l'infobulle sur une image avec un code pour le html ? Je sais que ma question est un peu bête. Merci d'avance pour la réponse. Bonne soirée

    30
    Mardi 20 Mars 2012 à 20:38

    Si tu veux mettre l'infobulle sur une image, il faut remplacer (dans le html) le texte visible par une image:

    <a class="infobulle" onmouseover="Help.bubble(this)"><img src="URL IMAGE"/></a><span class="help_content">TEXTE INVISIBLE</span>

    31
    Mardi 20 Mars 2012 à 20:50

    Merci beaucoup pour le code., ça marche nikel

    32
    Mardi 20 Mars 2012 à 21:53

    C'est Cool ça marche bien en plus mercii beaucoup !

     

    33
    Mercredi 21 Mars 2012 à 14:05

    D'acc Merci!

    34
    Atsumi Kusumi Profil de Atsumi Kusumi
    Mardi 15 Mai 2012 à 10:11

    Merciii 

    Mais pour activer le javascript il faut envoyé un message a stephanie ??

    *La-fille-qui-ne-ses-rien-a-rien*

    35
    Mardi 22 Mai 2012 à 17:15

    Nagalia,

    j'ai fait un tuto javascript qui permet le clic dans une infobulle (enfin un truc du genre^^)

    c'est ici: http://le-blog-facile.ek.la/des-tooltips-differents-p372367

    36
    Lundi 11 Juin 2012 à 17:27

    On peut aussi mettre directement le message dans la fonction Help.bubble comme ceci:

    <a onmouseover="Help.bubble(this,'&lt;strong&gt;Salut&lt;/strong&gt; c\'est moi&lt;br/&gt;&lt;img src=\'http://papasti.eklablog.fr/images/menubar/icon_account.png\'&gt;&lt;/img&gt;');">C'est moi</a>

    Et en plus simple avec juste un texte:

    <a onmouseover="Help.bubble(this,'Message ici');">C'est moi</a>

    37
    Shuchu Profil de Shuchu
    Vendredi 15 Juin 2012 à 12:16

    Merci beaucoup Nagalia, je le cherchais depuis le début de l'année et je viens d'avoir la précieuse idée de venir chercher sur ton blog 8D

    38
    Mardi 7 Août 2012 à 20:13

    Bonsoir ; 

    Ca me donne rien quand je passe la sourie ca ne fait rien !!!

    39
    Jeudi 16 Août 2012 à 10:59

    question : on fait comment pour qu'une infobulle apparaisse au survol de l'image/avatar de quelq'un (comme toi sur l'image/avatar de celui qui écrit (tu me suit ?))

    40
    Jeudi 16 Août 2012 à 18:06

    Je m'apelle pas Nagalia ; 

    Mais dans le Texte Visible mets : 

    <img src="URL de ton Image " alt="" />

    C'est tout et ne touche pas aucune chose d'autre :) !!

    41
    Jeudi 16 Août 2012 à 21:45

    merci !

    42
    Jeudi 16 Août 2012 à 21:46

    Pas de quoi n_n

    43
    Samedi 25 Août 2012 à 12:18

    Super pratique ça aussi! ^^

    44
    Mercredi 5 Septembre 2012 à 12:10

    Enfete Âñàs Üñîvérs Eta pas tout compris: par exembre que je survole ta photo de profil ya pas le moche truc jaune qu'on a quand on commence un blog , la c'est une petite bulle bleu arrodit avec écrit profil de..... Et moi je veut faire sa (c'est bon t'arrive a me suivre ??

    45
    Dimanche 7 Octobre 2012 à 10:49

    Han. Merci pour ce tuto' il va bien me servir ;)

    46
    Novalia
    Mercredi 24 Octobre 2012 à 11:40

    merci pour ce tuto ^^

    47
    Lundi 29 Octobre 2012 à 13:30

    ca marche pas =(

    48
    Lundi 29 Octobre 2012 à 13:32

    Je se suis pas nagalia . Mais qu'est ce qui ne marche pas ??

    49
    Lundi 29 Octobre 2012 à 13:40

    le 1 er code qui permet de mettre un texte avec fenetre au survol

    50
    Lundi 29 Octobre 2012 à 13:48

    <a class="infobulle" onmouseover="Help.bubble(this)">TEXTE VISIBLE</a><span class="help_content">TEXTE INVISIBLE</span>

    TEXTE VISIBLE: Par exemple tu mes +D'info

    Et TEXTE INVISIBLE: Tu mets ce qui s'afficherait !!

    51
    Lundi 29 Octobre 2012 à 15:42

    merci beaucoup

    je le mets en HTML donc?

    dsl j'y connais rien

    il ne m'affiche pas la bulle

     

    52
    Lundi 29 Octobre 2012 à 16:44

    Oui dans L'HTML

    53
    Dimanche 11 Novembre 2012 à 17:01

    Merci ça marche >< !!

    54
    Lundi 12 Novembre 2012 à 20:34

    pas pour moi =(

    55
    Vendredi 4 Janvier 2013 à 13:46

    Est ce possible d'avoir un lien et dessus d'avoir une infobulle?

    56
    Dimanche 13 Octobre 2013 à 19:05

    MERCI AUSSI POUR CE CODE! JY AI RAJOUTé dans code css le border radius !!!

    merci pour tout ce ke tu partages !!!

    57
    Jeudi 14 Novembre 2013 à 13:31

    Salut j'aurais voulu savoir comment faire une info-bulle sur le menu du header. Je cherche partout mais je n'arrive pas à trouver. Je ne sais même pas si c'est possible. Merci d'avance

    58
    Samedi 30 Novembre 2013 à 17:32

    Bonjour, j'ai installé un mauvais code sur mon blog hiver et je ne le vois plus, j'ai à la place une grosse

    page publicitaire qui s'ouvre, aurais-tu une solution pour faire disparaître cette page publicitaire s.t.p. ?

    On voit mon blog quelques secondes, il est bleu pâle, ensuite la page publicitaire apparaît.

    C'était un code pour faire tomber la neige que la personne devrait enlever de son blog pour nous aider soi-diant.

    En attendant, je me sers d'un autre blog.

    Une amie qui s'y connaît a bien essayé de m'aider, mais c'est compliqué.

    Amitié et bonne poursuite sur ce blog bien instructif.

    Tu pourras voir l'adresse de mon blog sur mon profil, il m'est difficile de la prendre et de la mettre ici.

    Merci à l'avance, si tu peux m'aider.

    Allison

    59
    Lundi 2 Décembre 2013 à 18:08

    @ Allison : Ton blog a l'air de fonctionner ;) Tout est résolu ?

    @ Shikamari : Je ne comprend pas très bien ce que tu veux dire par "infobulle dans le menu du header". Faire apparaitre une infobulle sur les liens ?
    Si c'est le cas, je crains que ça ne soit pas possible. Il faudrait que tu crées un autre menu, et que tu le place ensuite dans le header.

    => http://fanstasy-graph.eklablog.net/contenu-hors-des-articles-a30141132

    60
    Vendredi 11 Avril 2014 à 08:59

    "/!\ Pas de liens. Un bug que je n'arrive pas a résoudre fait qu'on ne peut pas passer la souris dans l'infobulle --' Si quelqu'un a une solution, je suis preneuse (surtout que ça marche partout SAUF sur ekla --'') "

    Pour ton probleme tu dois aller configuration generale /avance/ et cocher la case/ ○ Afficher la description de l'image lors du survol de la souris

    Voila j'espere que je t'ai aidee ^^

    61
    Mardi 15 Avril 2014 à 21:35

    Hm, à moins que je n'ai pas bien suivit la manip' , cette option permet seulement d'afficher le titre des image avec le même effet que les autres infobulles du blog. Il reste impossible de passer la souris dedans ^^'

    62
    Mardi 15 Avril 2014 à 22:30

    desole je sais pas alors X)

    63
    Dimanche 18 Mai 2014 à 11:57

    Bonjour ! J'aimerai ajouter des infobulles sur des images, c'est possible ?

    64
    Dimanche 18 Mai 2014 à 15:40

    Il suffit de mettre une image à la place de "TEXTE VISIBLE"

    <a class="infobulle" onmouseover="Help.bubble(this)"><img src="IMAGE"/></a><span class="help_content">TEXTE INVISIBLE</span>

    65
    Mardi 3 Juin 2014 à 01:03

    Le problème des liens est enfin résolu.

    Voici l'article explicatif pour ceux qui en aurait besoin :

    => http://fanstasy-graph.eklablog.net/infobulle-amelioree-a108139450

    66
    Jeudi 14 Août 2014 à 20:40

    Dommage que ça ne marche pas avec les liens...

    67
    Jeudi 14 Août 2014 à 21:33

    Il y a une autre façon de faire des infobulles pour y mettre des liens ;)

    => http://fanstasy-graph.eklablog.net/infobulle-amelioree-a108139450

    68
    Jeudi 14 Août 2014 à 21:39

    Non je parles du contenu visible. J'ai essayé de mettre une infobulle dans un lien mais il n’apparaissait pas au survol.

    69
    Jeudi 14 Août 2014 à 21:45

    Le lien est représenté par la balise <a>

    Normalement, on l'écrit simplement comme ça :

    <a href="URL"> MON LIEN </a>

    Il faut rajouter l'url de ton lien dans le code de l'infobulle avec l'attribut href

    <a href="URL" class="infobulle" onmouseover="Help.bubble(this)"> MON LIEN </a><span class="help_content">CONTENU INVISIBLE</span>

    70
    Jeudi 14 Août 2014 à 21:48

    D'accord, je vais essayez merci.

    71
    Lundi 3 Novembre 2014 à 18:14

    Bonjour, je souhaiterais savoir qu'ai-ce qu'on ajoute a la place de valeur dans le code suivant ?

    #help_bubble {
       propriété : valeur; /*personnalisez*/
    }

    72
    Lundi 3 Novembre 2014 à 18:26

    0.0 j'ai rien dis

    73
    Vendredi 7 Novembre 2014 à 16:30

    Comment on fait si on veut qu'une image apparaissent dans la bulle

    74
    Mardi 24 Février 2015 à 16:18

    Bonjour.
    Il faut le mettre dans la partie CSS, ou HTLM ? Si HTLM je ne vois pas le petit bouton HTLM.

    75
    pol2095
    Jeudi 26 Novembre 2015 à 14:26

    Il est où le fichier js ?
    merci

    76
    Lundi 29 Janvier 2018 à 08:35

    Bonjour ! merci pour ces css ^^

    77
    Mercredi 2 Janvier 2019 à 05:33

    Merci pour le tuto, ça m'a bien aidé! :)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :