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.

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>

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.