title: Afficher de manière classe des notes de bas de page dans un tooltip
date: 2015-01-05
tags: Geekeries,Internet
url: afficher-de-maniere-classe-des-notes-de-bas-de-page-en-tooltip
slug: afficher-de-maniere-classe-des-notes-de-bas-de-page-en-tooltip

Ou comment je fais pour afficher les « notes de bas de page » au milieu du
texte, au survol de la souris ou au tapotement sur mobile/GSM, sur le site [de
mes nouvelles](http://nouvelles.chibi-nah.fr/).

[![Capture d'écran d'un téléphone Android, affichant le navigateur Firefox,
ouvert sur la page des nouvelles, avec le tooltip « 1 : Note : les gobelins
s'affairent TOUJOURS auprès d'une étrange machine »
affiché.](/images/tooltip/snap-t.png)](/images/tooltip/snap.png) Affichage du site sur Mozilla Firefox sur
Android.

Sur le principe, c'est vraiment stupide. C'est simplement l'utilisation de la
classe « tooltip » sur la balise « a », et la définition arbitraire d'un
attribut « tooltip », contenant le texte à afficher.

Concrètement, dans le texte, j'ajoute une ligne comme ceci :



    <a href="http://nouvelles.chibi-nah.fr/ucdle3#a1" class="tooltip" tooltip="1 : Note : les gobelins s'affairent TOUJOURS auprès d'une étrange machine." >[1]</a>



Note : le contenu de href n'a pas d'importance (à priori).
Et la définition de tooltip en css :



    a.tooltip
    {
        position: relative;
    }

    a.tooltip:hover:after
    {
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        color: #fff;
        content: attr(tooltip);
        padding: 5px 15px;
        display: block;
        z-index: 98;
        position: relative;
    }



Pourquoi l'afficher comme ça et non comme les tooltips classiques avec des
triangles que l'on voit dans tous les exemples ? [[1]](https://blog.chibi-nah.fr/afficher-de-maniere-classe-des-notes-de-bas-de-page-en-tooltip#a1)
C'est juste une histoire de compromis. Le but étant un affichage simple et
optimisé sur mobile.



Je sais, ça reste du bidouillage pas vraiment "propre", mais ça marche.



* * *



1 : Tapez tooltip html5 dans votre moteur de recherche favori, vous trouverez
facilement.

.