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

Version imprimable

Bonjour,

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

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:

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

14/03/2023, 09h47
Doksuri

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
14/03/2023, 10h01
awalter1

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.
14/03/2023, 11h26
Doksuri

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

Code:

<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
14/03/2023, 14h56
awalter1

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
14/03/2023, 16h09
NoSmoking
Bonjour,

Citation:

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:

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.
14/03/2023, 17h56
awalter1

Ah ben si, cela fonctionne, je n'avais pas attendu assez longtemps :roll:
Pour FB en svg, je vais étudier la question.
Merci pour votre aide