Mettre un tooltip sur une icone d'accès Facebook

**awalter1** · 14/03/2023, 09h16

Bonjour,

Dans le pied de page, j'ai ajouté l'icone de facebook comme suit :
HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<head>
    <meta charset="UTF-8">
...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
...
            <div class="icons">
                <a href="https://www.facebook.com/groups/395286244444118" target="_blank"><i class="fa fa-facebook"></i></a>
            </div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.icons {
  padding-left: 20%;
}
 
.icons a {
  font-size: 1.3em;
  color: #FFFAE1;
}
 
.icons i:hover {
  transform: scale(1.5);
  transition: 0.1s;
}

Au survol de l’icône, le lien "https://www.facebook.com/groups/395286244444118" apparait en début de ligne (est ce considéré comme un tooltip?).
Ce texte n'étant pas informatif pour l'utilisateur, comment lui substituer un autre texte (exemple dans ce cas "peinture abstraite fait main) ?

Merci

**Doksuri** · 14/03/2023, 09h47

si tu veux, pour l'accessibilite (et faire office de tooltip natif) tu peux utiliser l'attribut title developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/title sinon, tu peux utiliser un attribut custom, et faire ta propre tooltip en css

**awalter1** · 14/03/2023, 10h01

Je n'ai pas dû être clair. "title est pour le nom de page (ou nom de l'onglet). Moi, je parles d'une icône FB qui permet d'accéder à FB, c'est donc avant l'affichage de la page FB.

**Doksuri** · 14/03/2023, 11h26

pardon... j'ai copier/colle le mauvais lien....developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/title

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div title="mon tooltip"><a href="...">mon lien FB</a></div>

je parlais bien de l'attribut "title" et non du "title" de la page

**awalter1** · 14/03/2023, 14h56

OK.
J'ai ajouté un "title". Il n' y a pas de tooltip qui apparait.
Voir bas de page de https://peindreavecanthony.go.yj.fr
Merci

**NoSmoking** · 14/03/2023, 16h09

Bonjour,

J'ai ajouté un "title". Il n' y a pas de tooltip qui apparait.

tout d'abord il serait bon que tu définisses ce qu'est une « tooltip » pour toi.

Si tu restes une petit moment sur ton lien, ce n'est pas imédiat moins d'une secodne, tu vois apparaître une petite « tooltip » avec le texte contenu dans l'atrtibut title. A ce sujet il est préférable de mettre cette attribut dans ton élément <a>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="icons">
  <a title="Peinture abstraite fait main" href="https://www.facebook.com/groups/395286244444118" target="_blank"><i class="fa fa-facebook"></i></a>
</div>

Autre remarque au passage, charger font-awesome juste pour l'icône FB cela me paraît un peu excessif à l'heure ou un petit SVG devrait suffire.

Mettre un tooltip sur une icone d'accès Facebook

HTML

Vue hybride

Discussions similaires

Partager

Partager