• Infobulle Améliorée

    Vous savez probablement déjà que l'on peu afficher des infobulles sur son blog en réutilisant un script de la plateforme. Si vous ne le saviez pas, je vous conseil de regarder l'article suivant, cela pourra toujours vous être utile.

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

    Cependant, bien que l'on puisse les personnaliser un peu grace au CSS, elles requiert que le JS soit activé sur le blog, et le contenu est inaccessible. Impossible de faire de copié collé, ou d'y insérer des liens.

    Je vous propose de résoudre ce problème en créant vos propres infobulles en full CSS, auxquelles vous pourrez également ajouter des transition pour avoir un affichage un peu plus sympa.

    Survolez moi......je fais apparaitre une infobulle !
    HTML

    Sans plus attendre, voici la structure HTML

    <div class="infoBulle">ELEMENT VISIBLE<span class="infoBulle">CONTENU INVISIBLE</span></div>

    Votre élément visible peut aussi bien être du texte, un lien ou une image. Vous pouvez également mettre ce que vous voulez dans le contenu invisible, texte image ou lien ;) Ce code vous permet donc de traiter tous les cas... sauf si vous voulez placer votre infobulle dans un texte comme ci-dessous:

    Voici un texte contenant une infobulleAfficher une définition.

    Même en spécifiant que div.infoBulle est un élément inline, je n'arriverais pas à ce résultat sur EklaBlog. En effet, l'éditeur HTML place automatiquement les balises <p> autour du texte, et n'autorise pas la présence d'un autre élément de type block (même s'il change de type) dans un paragraphe.
    Ainsi, si j'écris :

    <p> Du texte <div style="display:inline;"> Une boite </div> et du texte </p>

    Cela sera corrigé à l'édition en :

    <p> Du texte </p> <div style="display:inline;" > Une boite </div> <p> et du texte </p>

    J'aurais donc deux paragraphes et ma boite entre les deux.

    Pour régler ce problème, il faut utiliser une balise qui est par défaut de type inline. Par exemple <em> (italique) <strong> (gras) ou <a> (lien)

    Si vous utiliser l'une de ces balises à la place de <div>, vous ne pourrez pas l'utiliser à nouveau à l'intérieur du <span>. Privilégiez donc le premier code (avec <div> et <span>) tant que vous pouvez.

    Dans mon exemple, j'ai choisi la balise <strong> Ce qui me donne le code suivant :

    <strong class="infoBulle">Mon texte visible<span class="infoBulle">Je ne <em>peux pas<em> réutiliser la balise <a href="#">strong</a></span></strong>

    CSS

    Passons au CSS. Je vais travailler sur mon premier code avec div (vous n'aurez qu'à arranger un peu si vous devez changer de balise). La première chose à faire est de définir les deux états de la balise span (et donc de l'infobulle), c'est à dire visible et invisible.

    div span.infoBulle{
       visibility:hidden; /*masque l'infobulle*/
       position: absolute; /*permet de la faire sortir de div */
       margin-top: -Xpx; /*déplace vers le haut*/
       margin-left: -Xpx; /*déplace vers la gauche*/
       propriété : valeur; /*personnalisez*/
    }

    Voici l'état invisible.
    Modifier le X de margin-top et margin-left pour placer votre infobulle à côté, au dessus ou en dessous du texte visible.

    div.infoBulle:hover span.infoBulle {
       visibility: visible;
    }

    Et voici l'état visible. Il suffit de mettre visibility :visible;

    Avec ces deux codes vous devriez avoir votre texte invisible qui apparait et disparait. Passons donc à la partie un peu plus fun : la personnalisation. Nous allons placer tout nos styles dans div span.infoBulle. Ça peut sembler un peu étrange étant donné que c'est l'état invisible, mais cela nous garantie que nous aurons tout au moment d'afficher l'infobulle. 
    Je vous laisse personnaliser ça comme vous voulez, et je passe directement aux transitions. Si vous voulez des effets différents, je vous invite à lire les deux articles suivants :

    => Transition
    => Transform

    Dans mes exemples, j'ai utiliser rotate, scale ainsi que la propriété opacité que vous devriez connaitre (sinon, allez jeter un oeil à cet article)

    div span.infoBulle{
       visibility:hidden;
       position: absolute;
       margin-top: -30px;
       margin-left: -30px;
       background:  black;
       color: silver;
       transform:  scale(0) rotate(20deg);
       opacity: 0;
       transition: 300ms;
    }

    La partie grisée est normalement déjà présente dans votre CSS. Il s'agit du code donné plus haut pour le fonctionnement de l'infobulle.

    scale(0) me permet de réduire la taille de l'infobulle jusqu'à la rendre invisible
    rotate(20deg) tourne l'infobulle de 20°
    opacity: 0 baisse l'alpha de l'infobulle jusqu'à la rendre invisble

    Soyons bien d'accord, ce que je viens de rajouter n'a pas pour but de cacher l'infobulle, car elle l'est déjà grâce à visibility : hidden. En revanche, cela me permet, avec transition, de l'afficher et de la masquer d'une façon un peu plus classe ;) C'est ce que je vais définir dans le deuxième code, celui qui rend l'infobulle visible :

    div.infoBulle:hover span.infoBulle {
       visibility: visible;
       transform:  scale(1) rotate(0deg);
       opacity: 1;
    }

    scale(1) redonne à mon infobulle sa taille normale
    rotate(0) lui redonne la replace à l'horizontale
    opacity:1 la rend visible

    Toutes ces modification sont effectuées en 300ms, ce qui permet de faire une transition entre les deux états.

    Pourquoi visible: hidden ?

    Il est vrai que dans cet exemple j'aurais pu m'en passer, puisque je réduit sa taille à 0*0px. Mais dans tous les autres cas, même si vous mettez opacity: 0, l'élément est toujours accessible sur la page. Je vous conseil donc de le laisser, ça vous évitera d'avoir des problèmes d'affichages si vous vous trompez dans vos propriétés.


  • Commentaires

    1
    Mercredi 4 Juin 2014 à 14:48

    Super bien !

    J'adore les transitions ;) bravo !

    2
    Samedi 7 Juin 2014 à 14:15

    Merci beaucoup pour ces codes ! *-*

    3
    Dimanche 17 Août 2014 à 16:33

    Merci infiniment pour ce code !

    Pour ceux qui ont galéré à personnaliser les images mises en CONTENU INVISIBLE comme moi, allez dans CSS et ajoutez div.infoBulle:hover span.infoBulle img, vous pourrez ajouter un cadre ou faire des bords arrondis. 

    XD c'était l'info inutile du jour je sais ^^

    4
    Dimanche 7 Septembre 2014 à 11:25

    Merci pour le codes ! ^^

    5
    Vendredi 31 Octobre 2014 à 16:50

    Est-ce qu'il y a moyen de généraliser ça pour toutes les infobulle de blog ? notamment pour les derniers visiteurs :3

    Merci :3

    6
    Vendredi 31 Octobre 2014 à 18:26

    A mon avis ça doit être possible ! '-'

    7
    Vendredi 31 Octobre 2014 à 18:30

    Mais comment ? (telle est la question) ;)

    8
    Vendredi 31 Octobre 2014 à 18:48

    Je vais essayer de chercher x)

    9
    Vendredi 31 Octobre 2014 à 20:17

    Pour l'infobulle des visiteurs il y a un sélecteur pour ça : 

    #help_bubble

    Et après tu bidouilles avec ^^ (bon après c'était peut être pas ça que tu cherchais).

    10
    Samedi 1er Novembre 2014 à 14:52

    J'ai essayé mais... j'ai pas réussi ahah xD 

    11
    Samedi 1er Novembre 2014 à 14:56

    Bah pour modifier l'infobulle des derniers visiteurs c'est ce que j'utilise et ça marche é_e bon après si tu veux modifier le texte ou quoi : je sais pas faiiire x)

    12
    Samedi 1er Novembre 2014 à 15:02

    j'vais essayer des trucs je verrais bien xD merci quand même \o

    13
    Vendredi 7 Août 2015 à 13:46

    Bonjour :]

    Je voulais te remercier pour tes codes ^^

    14
    Dimanche 8 Novembre 2015 à 18:18

    Bonjour, 

    merci pour ton travail sur ce code! ^^

    J'ai juste une question, comment fait-on pour que l'élément visible soit une image? O.o

    15
    Dimanche 8 Novembre 2015 à 18:27

    Il faut mettre l'image dans la balise contenant le CONTENU VISIBLE

    <div class="infoBulle"><img src="URL"/><span class="infoBulle">CONTENU INVISIBLE</span></div>

    16
    Dimanche 8 Novembre 2015 à 18:46

    Merciiiii beaucoup! Bonne soirée~

    17
    Lundi 6 Juin 2016 à 22:05

    Yo! Merci pour cette astuce qui va m'être TRES TRES utiles

    18
    Vendredi 29 Juillet 2016 à 08:54

    Merci beaucoup pour ce code ! :)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :