107
Mise en forme des liens
Andy Budd (ce site web est génial) est un développeur web
„ résidant à Brighton en Angleterre.
J’ai.attribué.au.lien.la.classe.tooltip.afin.de.le.différencier.des.autres.liens..À l’intérieur,.
j’ai.ajouté.le.texte.que.je.souhaitais.afficher.comme.texte.du.lien,.suivi.du.texte.de.l’infobulle.entouré.d’une.balise.span..J’ai.mis.le.texte.d’info-bulle.entre.parenthèses.afin.que.la.
phrase.conserve.son.sens.même.si.les.styles.sont.désactivés..
La.première.chose.à.faire.est.de.définir.la.propriété.position.de.l’ancre.en.lui.attribuant.
la.valeur.relative..Vous.pouvez.ainsi.positionner.le.contenu.de.la.balise.span.de.manière.
absolue,.relativement.à.la.position.de.son.ancre.parente..
Le.texte.de.l’info-bulle.ne.doit.pas.s’afficher.au.départ..Vous.devez.donc.attribuer.la.valeur.
none.à.sa.propriété.display :
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
Le.contenu.de.la.balise.span.doit.s’afficher.quand.l’utilisateur.survole.l’ancre..Pour.cela,.
vous.devez.attribuer.la.valeur.block.à.la.propriété.display.de.la.balise.span,.mais.uniquement.lorsque.l’utilisateur.survole.le.lien..Pour.le.moment,.si.vous.testez.le.code.et.survolez.
le.lien,.vous.verrez.le.texte.de.la.balise.span.à.côté.du.lien.
Pour.positionner.le.contenu.de.la.balise.span.en.dessous.et.à.droite.de.l’ancre,.vous.devez.
attribuer.la.valeur.absolute.à.sa.propriété.position.et.la.positionner.à.1 cadratin.(em).du.
haut.de.l’ancre.et.2 cadratins.de.la.gauche.
a.tooltip:hover span {
display: block;
position: absolute;
top: 1em;
left: 2em;
}
Rappelez-vous.qu’un.élément.positionné.de.manière.absolue.l’est.en.fonction.de.son.ancêtre.
positionné.le.plus.proche.ou,.en.son.absence,.de.l’élément.racine..Dans.cet.exemple,.nous.
avons.positionné.l’ancre,.si.bien.que.la.balise.span.l’est.en.fonction.de.celle-ci.
C’est.le.principe.fondamental.de.cette.technique..Il.ne.reste.plus.qu’à.ajouter.une.mise.en.
forme.pour.faire.ressembler.la.balise.span.à.une.véritable.info-bulle..Vous.pouvez.définir.un.
remplissage,.une.bordure.et.une.couleur.d’arrière-plan :
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;
Mise en forme des liens
Andy Budd (ce site web est génial) est un développeur web
„ résidant à Brighton en Angleterre.
J’ai.attribué.au.lien.la.classe.tooltip.afin.de.le.différencier.des.autres.liens..À l’intérieur,.
j’ai.ajouté.le.texte.que.je.souhaitais.afficher.comme.texte.du.lien,.suivi.du.texte.de.l’infobulle.entouré.d’une.balise.span..J’ai.mis.le.texte.d’info-bulle.entre.parenthèses.afin.que.la.
phrase.conserve.son.sens.même.si.les.styles.sont.désactivés..
La.première.chose.à.faire.est.de.définir.la.propriété.position.de.l’ancre.en.lui.attribuant.
la.valeur.relative..Vous.pouvez.ainsi.positionner.le.contenu.de.la.balise.span.de.manière.
absolue,.relativement.à.la.position.de.son.ancre.parente..
Le.texte.de.l’info-bulle.ne.doit.pas.s’afficher.au.départ..Vous.devez.donc.attribuer.la.valeur.
none.à.sa.propriété.display :
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
Le.contenu.de.la.balise.span.doit.s’afficher.quand.l’utilisateur.survole.l’ancre..Pour.cela,.
vous.devez.attribuer.la.valeur.block.à.la.propriété.display.de.la.balise.span,.mais.uniquement.lorsque.l’utilisateur.survole.le.lien..Pour.le.moment,.si.vous.testez.le.code.et.survolez.
le.lien,.vous.verrez.le.texte.de.la.balise.span.à.côté.du.lien.
Pour.positionner.le.contenu.de.la.balise.span.en.dessous.et.à.droite.de.l’ancre,.vous.devez.
attribuer.la.valeur.absolute.à.sa.propriété.position.et.la.positionner.à.1 cadratin.(em).du.
haut.de.l’ancre.et.2 cadratins.de.la.gauche.
a.tooltip:hover span {
display: block;
position: absolute;
top: 1em;
left: 2em;
}
Rappelez-vous.qu’un.élément.positionné.de.manière.absolue.l’est.en.fonction.de.son.ancêtre.
positionné.le.plus.proche.ou,.en.son.absence,.de.l’élément.racine..Dans.cet.exemple,.nous.
avons.positionné.l’ancre,.si.bien.que.la.balise.span.l’est.en.fonction.de.celle-ci.
C’est.le.principe.fondamental.de.cette.technique..Il.ne.reste.plus.qu’à.ajouter.une.mise.en.
forme.pour.faire.ressembler.la.balise.span.à.une.véritable.info-bulle..Vous.pouvez.définir.un.
remplissage,.une.bordure.et.une.couleur.d’arrière-plan :
a.tooltip:hover span, a.tooltip:focus span {
display:block;
position:absolute;
top:1em;