info-bulle simple
Le résultat :
(L'info-bulle ne s'affiche qu'après un petit délai au survol des mots en rouge)
Du texte descriptif . Une information qui peut se développer et gubernationis ultimum cum ultimo sapientiae comparatur. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Hanc igitur quoque transfer in animum dirigentes.
et gubernationis ultimum cum ultimo Une autre. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Hanc igitur quoque transfer in animum dirigentes.
et gubernationis ultimum cum ultimo sapientiae comparatur. Encore une dernière Mihi quidem Antiochum, quem audis, satis belle videris attendere. Hanc igitur quoque transfer in animum dirigentes.
La technique :
Pour réaliser ces infobulles
1- collez une class "bulle" dans modifier le head :
/*info bulle sur texte*/
.bulle{color:red; cursor:pointer;}
.bulle:hover{color:#fc7575;}
(vous pouvez ajouter toutes les propriétés d'aspects désirées)
2 - Tapez sur la page normalement dans un bloc texte :
"Texte texte texte. Texte texte texte. Texte à survoler. Texte texte texteTexte texte texteTexte texte texteTexte texte texteTexte…"
3- Modifiez le html du bloc texte et insérez des commentaires :
<p>Texte texte texte <span class="bulle" title="Je rajoute ici le commentaire qui me plait">Texte à survoler</span> texte texte texte.
info-bulle paramétrable
Le résultat :
Texte texteTexte texteTexte texte texte Texte à survoler texte texte texte. Texte texte texte Texte à survoler texte texte Texte texteTexte texteTexte texteTexte texte texte.
Texte texte texte Texte à survoler texte texte texte.
La technique :
Pour réaliser ces infobulles, on ne peut pas utiliser "title", qui ne peut être ciblé par css. Mais on peut cibler n'importe quel élément auquel on a attribué une class (ici nommée arbitrairement "bulle2".
1 - Voici le texte que l'on modifie comme précédemment avec "modifier le html", dernière commande du module texte :
<p>Texte texte texte <span class="bulle2" commentaire="Je rajoute ici le commentaire qui me plait">Texte à survoler</span> texte texte texte.
2- collez dans modifier le head :
/* le texte de classe "bulle2" change de position*/
.bulle2 {position: relative; /* la souris change de pointeur au survol de ce texte*/
cursor: pointer;
/* ici, les autres propriétés de style du texte en exergue */
color: white;
padding: 3px 0px 0px 0px;
background-color: #005ea7;}
/* Ce qui suit "fabrique" un élément après le texte au survol, en affichant ce que l'on a écrit dans le html comme
commentaire*/
.bulle2:hover::after, .bulle2:focus::after {
/*le contenu d'attribut "commentaire" est affiché */
content: attr(commentaire);
/*diverses propriétés pour placer le commentaire verticlement et horizontalement par rapport au texte*/
position: absolute; top: -2em;
left: 50%; transform: translateX(-50%); /* centrer - et dimensionner - par rapport au texte */
z-index: 1; /*placer au dessus, dans la profondeur du
site*/
white-space: nowrap; /*empêcher le retour à la ligne. On peut
mettre - à la place de cette ligne - des indications pour forcer le commentaire à occuper une largeur précise :
min-width:150px,; max-width:200px;*/
/* ici, les autres propriétés de style du commentaire
*/
background-color: #FDE9E0;
border: 1px solid #000000;
padding: 10px;
font-size: 14px;
color:red;
}